我想实现的效果

我按教程写出的效果

折腾半天之后的经验

<!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>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="./three.min.js"></script>
</head>
<body>
<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
    var renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.shadowMap.enabled = true;
    // 创建三维坐标系
    renderer.setClearColor(new THREE.Color(0x666666));
    renderer.setSize(window.innerWidth, window.innerHeight)
    var axes = new THREE.AxesHelper(10)
    scene.add(axes)
    // 创建立方体
    var cube = new THREE.Mesh(
      new THREE.BoxGeometry(10,10,10),
      new THREE.MeshPhongMaterial( {
        map: new THREE.TextureLoader().load('/box.png')
      })
    )
    scene.add(cube)
    // 创建光源
    var spotLight = new THREE.SpotLight(0xffffff,1)
    spotLight.position.set(20,50,20)
    scene.add(spotLight)
    camera.position.set(-20,20,50)
    camera.lookAt(scene.position)
    document.body.appendChild(renderer.domElement)
    //renderer.render(scene,camera) // 这里是问题的关键，要把这个renderer函数异步执行，或者在图片加载函数的回掉函数中执行
    setTimeout(()=>{
      renderer.render(scene,camera)
    },20)
</script>
</body>
</html>

计划做一个系列的踩坑笔记，记录自己学习threejs的心路历程

新手解决threejs 物体贴图一片黑的问题

我想实现的效果

我按教程写出的效果

折腾半天之后的经验

计划做一个系列的踩坑笔记，记录自己学习threejs的心路历程