Three.js - 画布元素未正确显示。只看到黑匣子

Question

我对 three.js 比较陌生，我正在尝试复制我在小提琴内部的 Observable 上找到的以下代码块。

https://observablehq.com/@bumbeishvili/three-js-wooden-bar-chart

当我运行代码时，我看到的只是一个巨大的黑盒子。我以为我将组材质和灯光元素正确添加到场景中，但渲染的只是黑色。任何帮助将不胜感激。

这是我的代码：

 canvas {
  display: block;
 }

initiateThree();

function initiateThree() {

 data = [
        [3,2,1],
        [6,5,4],
        [8,7,6],
        ]

 var i =1;

 height = 500
 fov = 18
 //aspect = width / height
 aspect = 500 / 500
 near = 0.1
 far = 1000

 loader = new THREE.TextureLoader()

 function update() {
  //cubeGroup.rotation.x += 0.001;
  cubeGroup.rotation.y += 0.001;
  //cubeGroup.rotation.z += 0.001;
 }

 function render(scene) {
   renderer.render(scene, camera);
 }

const scene = new THREE.Scene(); // ADDED

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(-4, 1, 4);


//max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d))) 

cubeGeometries = data.map(row=>{
  return row.map(c=>{
  //return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
  return new THREE.BoxGeometry( 0.2, c/8, 0.2 );
 })
})

const cubeMaterial =  new THREE.MeshStandardMaterial({
map:loader.load('https://threejsfundamentals.org/threejs/lessons/resources/ 
images/compressed-but-large-wood-texture.jpg')
});

cubeMaterial.color.convertSRGBToLinear();

const cubeMeshes = cubeGeometries.map(row=>{
 return row.map(cubeGeometry => new THREE.Mesh( cubeGeometry, cubeMaterial ))
})

const cubeGroup = new THREE.Group(); 
 data.forEach((row,i,iarr)=>{
  row.forEach((d,j,jarr)=>{
   cubeMeshes[i][j].position.set(
     i/iarr.length-0.5, 
     //d/max*0.5-0.6,
     d/8*0.5-0.6,
     j/jarr.length-0.5);  
  
   //cubeMeshes[i][j].scale.set(1,4,1);
   cubeGroup.add(cubeMeshes[i][j]);
 })
})


const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
mainLight.position.set(10, 10, 10);

const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);

//scene.add(cubeMeshes); //Not This One?
scene.add(cubeGroup); 
scene.add(mainLight);
scene.add(ambientLight);

const renderer = new THREE.WebGLRenderer({
        antialias: true
});

//renderer.setSize(width, height);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;

document.body.appendChild( renderer.domElement ); //ADDED

}

这是我的小提琴：

https://jsfiddle.net/bullybear/m826gkrt/326/

Answer 1

您的代码中缺少一些内容：

• 没有动画循环。
• 相机不看盒子。
• 还升级到最新版本的three.js (r118) 并删除了旧代码。

let scene, camera, renderer;

let cubeGroup;

init();
animate();

function init() {

  const data = [
    [3, 2, 1],
    [6, 5, 4],
    [8, 7, 6],
  ]

  var i = 1;

  height = 500
  fov = 18
  //aspect = width / height
  aspect = 500 / 500
  near = 0.1
  far = 1000

  loader = new THREE.TextureLoader()


  scene = new THREE.Scene(); // ADDED

  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(-4, 1, 4);
    camera.lookAt( scene.position );


  //max = Math.max.apply(Math, data.map(d=>Math.max.apply(this,d))) 

  cubeGeometries = data.map(row => {
    return row.map(c => {
      //return new THREE.BoxGeometry( 0.2, c/max, 0.2 );
      return new THREE.BoxBufferGeometry(0.2, c / 8, 0.2);
    })
  })


  const cubeMaterial = new THREE.MeshStandardMaterial({
    map: loader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
  });
  cubeMaterial.color.convertSRGBToLinear();

  const cubeMeshes = cubeGeometries.map(row => {
    return row.map(cubeGeometry => new THREE.Mesh(cubeGeometry, cubeMaterial))
  })


  cubeGroup = new THREE.Group();
  data.forEach((row, i, iarr) => {
    row.forEach((d, j, jarr) => {
      cubeMeshes[i][j].position.set(
        i / iarr.length - 0.5,
        //d/max*0.5-0.6,
        d / 8 * 0.5 - 0.6,
        j / jarr.length - 0.5);

      //cubeMeshes[i][j].scale.set(1,4,1);
      cubeGroup.add(cubeMeshes[i][j]);
    })
  })


  const mainLight = new THREE.DirectionalLight(0xffffff, 3.0);
  mainLight.position.set(10, 10, 10);


  const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3);

  scene.add(cubeGroup);
  scene.add(mainLight);
  scene.add(ambientLight);


  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.physicallyCorrectLights = true;

  document.body.appendChild(renderer.domElement); //ADDED

}

function animate() {

  requestAnimationFrame( animate );
  cubeGroup.rotation.y += 0.001;
  renderer.render( scene, camera );

}

body {
      margin: 0;
}
canvas {
    display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.118.3/build/three.js"></script>