我第一次尝试 Three.js，我不明白为什么我可以看到颜色和我的环面。
我尝试在渲染中将 alpha: true 转为 true
我尝试更改相机位置 z。
我尝试改变颜色。
我尝试控制台记录一些内容，它正在工作。
我尝试更改窗口大小。
//Création de la scène
let scene = new THREE.Scene();
//Création de la caméra (champ de vu, grandeur de la fenetre, ?, distance de rendu)
let camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000);
//Définition de la position de la caméra
camera.position.z = 100;
scene.add(camera);
//Création le rendu
let rendu = new THREE.WebGLRenderer({ alpha: true });
//Définition de la taille du rendu
rendu.setSize(window.innerWidth, window.innerHeight)
//Défnition de la couleur du fond
rendu.setClearColor(0xff7f50, 0);
//Affichage du rendu dans notre page html
document.body.appendChild(rendu.domElement);
//Création du groupe
let forme = new THREE.Group();
//Création d'un torus (rayon, grosseur du tube, nombre de segment, nombre de segment le long du tube)
let geometrie = new THREE.TorusKnotGeometry(10,3,100,16)
//Création du matériau
let materiel = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 1,
wireframe: true,
wireframeLinewidth: 5,
});
//Ajout du torus et de son matériau dans le groupe créer précedement
forme.add(new THREE.Mesh(geometrie,materiel));
scene.add(forme);<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>ThreeJS</title>
<style>
body{margin: 0;}
canvas{width: 100%;height: 100%;}
</style>
</head>
<body>
<script src="../Projet/lib/three.js"></script>
<script src="../Projet/script.js"></script>
</body>
</html>感谢您的帮助!
最佳答案
你实际上并没有渲染你的场景。像这样尝试一下:
//Création de la scène
let scene = new THREE.Scene();
//Création de la caméra (champ de vu, grandeur de la fenetre, ?, distance de rendu)
let camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
//Définition de la position de la caméra
camera.position.z = 100;
scene.add(camera);
//Création le rendu
let rendu = new THREE.WebGLRenderer({antialias: true});
//Définition de la taille du rendu
rendu.setSize(window.innerWidth, window.innerHeight)
//Défnition de la couleur du fond
rendu.setClearColor(0xff7f50, 0);
//Affichage du rendu dans notre page html
document.body.appendChild(rendu.domElement);
//Création du groupe
let forme = new THREE.Group();
//Création d'un torus (rayon, grosseur du tube, nombre de segment, nombre de segment le long du tube)
let geometrie = new THREE.TorusKnotGeometry(10, 3, 100, 16)
//Création du matériau
let materiel = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 1,
wireframe: true,
wireframeLinewidth: 5,
});
//Ajout du torus et de son matériau dans le groupe créer précedement
forme.add(new THREE.Mesh(geometrie, materiel));
scene.add(forme);
animate();
function animate() {
requestAnimationFrame(animate);
rendu.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691d011b0c0c295947585a5a4758" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.min.js"></script>关于javascript - Three.js不显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69594871/