我的 three.js 场景没有渲染。不知道为什么

Question

我的 main.js 文件包含：-

import './style.css';
import * as THREE from 'three';


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

//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) 
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth/window.innerHeight,
  0.1,
  1000,
);

const renderer = new THREE.WebGLRenderer({
  //which DOM element to use
  canvas: document.querySelector('.canvas'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);


//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true}); 

//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);

scene.add(globe);

function animate(){
  requestAnimationFrame(animate); //optimized rendering

  //rotation
  globe.rotateOnAxis += 0.01;
  renderer.render( scene, camera );
}
animate();

renderer.render(scene, camera);

和我的 index.html :-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Gautam</title>
  </head>
  <body>
    <canvas id="globe">This is the canvas
    </canvas>
    <script type="module" src="./main.js"></script>
  </body>
</html>

我屏幕上出现的所有内容是：- [我的浏览器上显示的内容][1] [1]: https://i.stack.imgur.com/PQmJu.png

我检查过，我的 main.js 文件确实在执行，但屏幕上没有渲染任何内容

Answer 1

renderer.setSize(window.innerWidth / window.innerHeight);

改为像这样调用方法：

renderer.setSize(window.innerWidth, window.innerHeight);

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

//arguments - field of view, aspect ratio, last 2 are view frustrum(controls which objects are visible relative to the camera) 
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

const renderer = new THREE.WebGLRenderer({
  //which DOM element to use
  canvas: document.querySelector('#canvas')
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(100);


//arguments - radius, widthsegments, heightsegements
const geometry = new THREE.SphereGeometry(15, 32, 16);
//wireframe true to get a better look at its geometry
const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  wireframe: true
});

//torus is creating the mesh with geometry and material //mesh = geometry + material
const globe = new THREE.Mesh(geometry, material);

scene.add(globe);

function animate() {
  requestAnimationFrame(animate); //optimized rendering

  //rotation
  globe.rotateOnAxis += 0.01;
  renderer.render(scene, camera);
}
animate();

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js"></script>
<canvas id="canvas"></canvas>

Answer 2

你有一些问题。

document.querySelector('.canvas')

这会 select 具有 class canvas 的元素，但是您的 DOM 没有这样的元素。它确实有一个带有 type canvas 和 ID globe 的元素，因此该行应该是以下：

document.querySelector('canvas')
document.querySelector('#globe')
document.getElementById('globe')

接下来，

renderer.setSize(window.innerWidth / window.innerHeight);

正如@Mugen87 指出的那样，这应该是

renderer.setSize(window.innerWidth, window.innerHeight);

如您所写，渲染器的宽度被设置为商，其高度（缺少的第二个参数）被设置为 undefined，three.js 具有的情况没有处理。

而且，

globe.rotateOnAxis += 0.01;

rotateOnAxis是一个以向量（旋转轴）和标量（旋转角度）为参数的函数。通过为其分配 +0.01，您只是替换函数本身，而不是调用函数。例如，如果您想围绕地球的 y-axis 旋转，您可以使用

globe.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0.01);

最后，对 renderer.render(...) 的第二次调用（animate() 函数之外的调用）是不必要的。

我的 three.js 场景没有渲染。不知道为什么

my three.js scene is not rendering. not sure why

javascript

css

three.js