three.js 没有投影

最新推荐文章于 2024-02-29 20:01:05 发布

原创最新推荐文章于 2024-02-29 20:01:05 发布 · 604 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

three.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Three.js的实例化渲染示例，通过创建多个实例化的立方体，并设置不同的位置与颜色，实现了基本的三维场景搭建。文章涵盖了场景初始化、光照配置、网格实体创建及阴影效果启用等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照demo【physics_oimo_instancing.html】敲的，不知道问题出现在哪儿

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>

  <script type="importmap">
    {
      "imports": {
        "three": "../three.js-r139/build/three.module.js"
      }
    }
  </script>
  <script type="module">
    import * as THREE from "../three.js-r139/build/three.module.js";
    import { OrbitControls } from "../three.js-r139/examples/jsm/controls/OrbitControls.js";
    import { GUI } from "../three.js-r139/examples/jsm/libs/lil-gui.module.min.js";

    var scene, camera, renderer;
    let boxes, icosahedrons, floor;
    var axesHelper;
    let ambientLight, dirLight;
    let controls;

    let width = window.innerWidth;
    let height = window.innerHeight;
    
    const color = new THREE.Color()
    

    initThree()
    initLight()
    initMeshs()
    enableShadow()
    render()

    window.addEventListener('resize', function () {
      width = window.innerWidth;
      height = window.innerHeight;
      camera.aspect = width / height
      camera.updateProjectionMatrix()
      renderer.setSize(width, height)
    })
    // document.addEventListener('mousemove', function  (event) {
    //   // 针对页面做了分割,中心点为0,0,左上角是-1,1右上角是1,1
    //   mouse.x = event.clientX/window.innerWidth * 2 - 1
    //   mouse.y = -event.clientY/window.innerHeight * 2 + 1
    // })
    function initThree() {
      // 场景
      scene = new THREE.Scene()
      scene.background = color.setHex(0x888888)

      // 透视摄像机
      camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
      camera.position.set( 4,4,4 );
      camera.lookAt( 0, 0.5, 0 );
      
      // 环境光
      ambientLight = new THREE.AmbientLight()
      scene.add(ambientLight)

      // 辅助坐标轴
      axesHelper = new THREE.AxesHelper(1)
      scene.add(axesHelper)

      // 实例化构造器，并插入到dom元素中
      renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(width, height)
      document.body.appendChild(renderer.domElement)

      // 轨道控制器
      controls = new OrbitControls(camera, renderer.domElement)
      // requestAnimationFrame(render)
      // controls.addEventListener('change', render)
      // render()
    }
    // 实体
    function initMeshs() {
      floor = new THREE.Mesh(
        new THREE.BoxGeometry(10, 1, 10),
        new THREE.ShadowMaterial({color: 0x111111})
      )
				floor.position.y = - 2.5;
      scene.add(floor)


      const material = new THREE.MeshLambertMaterial()
      boxes = new THREE.InstancedMesh(
        new THREE.BoxGeometry(0.1, 0.1, 0.1),
        material,
        100
      )
      const matrix4 = new THREE.Matrix4()
      const color = new THREE.Color()
      for (let index = 0; index < boxes.count; index++) {
        matrix4.setPosition(Math.random(), Math.random(), Math.random())
        boxes.setMatrixAt(index, matrix4)
        boxes.setColorAt(index, color.setHex(Math.random() * 0xffffff))
      }
      scene.add(boxes)
    }
    function initLight() {
      dirLight = new THREE.DirectionalLight()
      dirLight.position.set(10, 10, -5)
      scene.add(dirLight)
    }
    function enableShadow () {
      renderer.shadowMap.enable = true
      floor.receiveShadow = true
      boxes.castShadow = true // 生成投影
      boxes.receiveShadow = true // 接收阴影
    }
    // 渲染
    function render() {
      requestAnimationFrame(render)
      renderer.render(scene, camera)
    }


  </script>
</body>

</html>```