首页 > 其他分享> > vue如何创建一个three场景

vue如何创建一个three场景

2022-07-15 14:31:56 作者：互联网

第一步:下载three的npm包

npm i three -S

第二步创建容器

第三步引入three文件

i mport * as THREE from 'three'

第四步声明需要用到的对象(这些对象生命在export default外面的话会得到一定的性能优化：因为在data函数里面声明的话vue需要监听这些函数，会导致运行变慢)

场景对象 scene

光源对象 point

环境光对象 ambient

渲染器对象 renderer

控制器对象 controls

第五步在mounted生命周期里面启动init函数并且在methods里面声明init函数

第六步创建场景对象scene（对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象。添加其他对象的时候通过.add(object)的方法进行添加对象，通过remove(object)删除对象）

scene = new THREE.scene();

第七步添加相机对象，相机分为正投影相机和透视投影相机，透视投影相机是人眼模式，近大远小

获取容器dom let container = document.querySelector('#container');

获取容器dom的宽度和高度 let width = container.offsetWidth; let height = container.offsetHeight;

创建相机 camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 1000); // 透视投影相机摄像机视锥体垂直视野角度，摄像机视锥体长宽比，摄像机视锥体近端面，摄像机视锥体远端面

设置相机的位置 camera.position.set(0, 0, 10);

设置相机指向的方向 camera.lookAt(scene.position); //相机指向场景中心店

第八步添加渲染器对象

创建渲染器 renderer = new THREE.WebGLRenderer()

设置渲染区域的尺寸 renderer.setSize(width,height);

设置颜色背景 renderer.setClearColor(0xb9d3ff,1) // 颜色,透明度

把渲染器对象添加到容器里面 container.appendChild(renderer.domElement);

第九步渲染出来页面

创建 render函数

render(){

renderer.render(scene,camera); //把场景和相机放到渲染器里面 ps:以后如果添加模型或者修改模型等等操作都需要重新执行这个函数页面才会做出改变

}

现在页面已经出现东西了，但是什么只是一个带背景颜色的画布

第十步创建一个宽高长度都是1的立方体并且颜色设置为绿色

创建立方体几何对象Geometry let geometry = new THREE.BoxGeometry(1,1,1) // 宽，高，深度

创建一个不透光的材质对象 let material = new THREE.MeshLambertMaterial({

color:0x00ff00 // 颜色设置为绿色（还有其他参数可以去官网自行查询，底部会放入官网连接）

})

把立方体对象和材质对象放入网格模型里面 let mesh = new THREE.Mesh(geometry,material);

把网格模型添加到场景对象中，然后执行render函数重新渲染一遍 scene.add(mesh); this.render();

此刻页面变成了这个样子

现在看到的

这个时候稍微改变一下相机的位置就能看出

camera.position.set(-2,5,10); // 修改 x轴和y轴的参数

执行render函数重新渲染一遍

第十一步给场景添加光源（PointLight：从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光）

创建光源 point = new THREE.PointLight(0xffffff);

修改光源的位置（默认位置是场景对象的中心点）point.position.set(x,y,z);

把光源添加到场景对象中 scene.add(point)

执行render函数重新渲染一遍

加完光源之后更明显了

第十二步给场景对象添加环境光

创建环境光 ambient = new THREE.AmbientLight(0x444444);

添加到场景里面 scene.add(ambient);

执行render函数重新渲染一遍

现在一个简单的3d场景就这样创建完成了

完整代码

<template>
  <div class="about">
    <!-- 3D模型容器 -->
    <div id="container"></div>
  </div>
</template>
<script>
import * as THREE from 'three'

// 场景对象Scene
let scene = null;
// 光源对象
let point = null;
// 环境光
let ambient = null;
// 相机对象
let camera = null;
// 渲染器对象
let renderer = null;
// 控制器对象
let controls = null;

export default {
  name: "AboutView",
  data() {
    return {}
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let container = document.querySelector('#container');
      scene = new THREE.Scene();
      /**
       * 相机设置
       */
      let width = container.offsetWidth; //当前元素宽度
      let height = container.offsetHeight; //当前元素高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      // 正投影相机
      // camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      // 透视投影相机（人眼模式、近大远小）
      camera = new THREE.PerspectiveCamera(70, width / height, 0.1, 1000);
      camera.position.set(0, 0, 10); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);//设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      container.appendChild(renderer.domElement); //body元素中插入canvas对象
      /**
       * 创建几何体
       * */
      let geometry = new THREE.BoxGeometry(1, 1, 1); //创建一个立方体几何对象Geometry
      let material = new THREE.MeshLambertMaterial({
        color: 0x00ff00
      }); //材质对象Material
      let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      scene.add(mesh); //网格模型添加到场景中
      this.render();
      camera.position.set(-2, 5, 10); //设置相机位置
      this.render();
      /**
       * 光源设置
       */
      point = new THREE.PointLight(0xffffff);
      point.position.set(10, 10, 40); //点光源位置
      scene.add(point); //点光源添加到场景中
      this.render();
      /**
       * 环境光设置
       */
      ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
      this.render();
    },

    render(){
      renderer.render(scene, camera);
    },
  }
}
</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  height: 100%;

  #container {
    width: 100%;
    height: 100vh;
  }
}
</style>

three的文档地址 https://threejs.org/docs/#manual/zh/introduction/Creating-a-scene

标签：场景,scene,对象,three,THREE,相机,vue,let,new
来源： https://www.cnblogs.com/zhuangbowu/p/16481272.html