英文:
Why doesn't my three.js code show the light effect?
问题
按照手册的指导，我制作了一个Three.js示例，但光效没有出现，为什么光源没有出现，并且没有关于光源的任何错误？
import * as THREE from "/assets/threejs/build/three.module.js"
class App {
// 创建和初始化
constructor(){
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
// 设置相机
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
100,
)
camera.position.z = 2;
this._camera = camera;
}
// 设置光源
_setupLight(){
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
// 设置模型
_setupModel(){
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial( { color: 0x44a88 } );
const cube = new THREE.Mesh( geometry, material );
this._scene.add(cube);
this._cube = cube;
}
// 调整窗口大小
resize(){
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
// 渲染
render(time){
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
// 更新
update(time){
time *= 0.001;
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function(){
new App();
}
这是我示例代码的结果截图。
下面是手册的结果截图。
对于多次提出低难度问题，我很抱歉，但我是第一次学习Three.js。在VSCode中没有Three.js代码提示库，这让学习变得困难。在我的示例代码中，如何正常表达光效呢？会吗？感谢您阅读这个问题。
英文:
Following the manual, I made a three.js example, but the light effect doesn't appear, why the light source doesn't appear without any error about the light source?
import * as THREE from "/assets/threejs/build/three.module.js"
class App {
// 생성 초기화
constructor(){
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
// 카메라
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
100,
)
camera.position.z = 2
this._camera = camera;
}
// 광원
_setupLight(){
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
// 모델
_setupModel(){
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial( { color: 0x44a88 } );
const cube = new THREE.Mesh( geometry, material );
this._scene.add(cube);
this._cube = cube;
}
// 창크기 번경
resize(){
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
// 랜더링
render(time){
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
// 업데이트
update(time){
time *= 0.001;
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function(){
new App();
}
The screenshot below is the result of my example code.
The screenshot below is the result of the manual.
I'm sorry for posting multiple questions with a low difficulty problem, but, I'm learning three.js for the first time. In vscode, there is no three.js code hint library, and it's hard. How can I express the light effect normally in my example code? Will there be? thanks for reading the problem
答案1
得分: 2
不要使用 MeshBasicMaterial，而要使用 MeshStandardMaterial。MeshBasicMaterial 用于以平面或线框方式绘制几何体。MeshStandardMaterial 是一种基于物理的材质，使表面与光线互动。
英文:
Do not use MeshBasicMaterial, but MeshStandardMaterial. MeshBasicMaterial for drawing geometries in a flat or wireframe way. MeshStandardMaterial is a physically based material that makes the surface interact with the light.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论