three.js 没有投影

本文介绍了一个基于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>```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值