Three.js场景：初始化搭建（含代码、案例、截图）

Three.js场景：初始化搭建（含代码、案例、截图）

搭建步骤：请结合下文案例代码，进行对比参考学习，此处不再赘述！

搭建步骤：

• 创建场景、摄像机
• 创建ThreeJS渲染器

1. 创建渲染器
2. 设置渲染器场景的大小
3. 把渲染器添加到我们的页面中去

• 创建基础几何模型

1. (即：在场景中添加几何物品)
2. 创建纹理贴图
3. 创建材质

• 创建网络对象

1. 把网格对象添加到场景中去

• 添加帧渲染、设置摄像机空间Z轴位置
• 动态响应窗口缩放尺寸

1. 初始化摄像机
2. 初始化摄像机矩阵投影
3. 初始化渲染器尺寸

案例截图：

• 效果图截图如下：

案例代码 · 示例：

• 示下：

init(){
  console.log("init")
  //1. 创建场景和摄像机
  const scene = new THREE.Scene();
  // 2. 创建摄像机
  // const camera = new THREE.PerspectiveCamera('视角', '指投影窗口的长宽比', '表示从距离摄像机多远的位置开始渲染', '表示距离摄像机多远的位置截止渲染 1000')
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1 , 1000)

  // 创建ThreeJS渲染器
  const renderer = new THREE.WebGLRenderer({antialias: true});// new THREE.WebGLRenderer();
  // 设置渲染器场景的大小
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把渲染器添加到我们的页面中去
  // document.body.appendChild(renderer.domElement);
  this.$refs.container.appendChild(renderer.domElement)

  // 创建基础几何模型(在场景中添加几何物品)
  // const geometry = new THREE.BoxGeometry('X轴的长', 'Y轴的长', 'Z轴的长')
  const geometry = new THREE.BoxGeometry(4,4,4)

  // 创建纹理贴图
  const texture = new THREE.TextureLoader().load(require("@/views/example/vr/images/wenli_05.png"));
  // 创建材质
  const material = new THREE.MeshBasicMaterial({
    // color: 0x00ff00,
    map: texture
  });
  // 创建网络对象
  const cube = new THREE.Mesh(geometry, material);
  // 把网格对象添加到场景中去
  scene.add(cube)




  //添加帧渲染
  function animate(){
    requestAnimationFrame(animate)
    // 网格对象自动旋转
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    // 渲染器渲染场景和照相机
    renderer.render(scene, camera)
  }
  animate()
  // 摄像机空间Z轴位置
  camera.position.z = 10;// 数值越大,模型距离屏幕感觉越远


  // 动态响应窗口缩放尺寸
  window.addEventListener('resize', () => {
    // 初始化摄像机
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix()// 初始化摄像机矩阵投影
    // 初始化渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight)
  })

},

以上就是关于“Three.js场景：初始化搭建（含代码、案例、截图）”的全部内容。