vue中使用three,绘制3d场景--初始化
一,初始化1,安装依赖(注意项目name不能为three,否则会有冲突)npm i three --save2,在需要使用three的组件中引入threeimport THREE from "three";3,初始化(1)场景scene初始化this.secen = new THREE.Secen();(2)相机camera初始化const aspect = window.i...
·
一,初始化
1,安装依赖(注意项目name不能为three,否则会有冲突)
npm i three --save
2,在需要使用three的组件中引入three
import THREE from "three";
3,初始化
(1)场景scene初始化
this.secen = new THREE.Secen();
(2)相机camera初始化
const aspect = window.innerWidth / window.innerHeight; //宽高可根据实际项目要求更改
this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);//使用最常见的远景相机,类似于人眼观察的方式。
this.camera.position.set(15, 0, 15);
this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点
this.secen.add(this.camera);
(3)渲染器render初始化
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);//宽高可根据实际项目要求更改
const container = document.getElementById("container");
container.appendChild(this.renderer.domElement);//把 renderer 元素添加到HTML文档中。这是一个 <canvas> 元素,用来显示场景。
虽然此时已经进行了初始化,但是依然看不到场景,这是因为我们并没有将其真正渲染。
(4)循环渲染
animate() {
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animate);
}
此时,我们发现页面变黑啦。这是他的默认背景色,说明渲染成功啦~欲更改背景可通过修改renderer为以下代码:
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
此时就是透明的背景啦~
接下来要做的就是将模型加载到场景中。
更多推荐
已为社区贡献3条内容
所有评论(0)