时间戳

首页 > 解决方案 > 三.js什么都不显示

javascript - 三.js什么都不显示

问题描述

我第一次尝试three.js，我不明白为什么我可以看到颜色和我的圆环。

我尝试在我的渲染中打开 alpha: true

我尝试改变相机位置z。

我试着改变颜色。

我尝试 console.log 一些东西，它正在工作。

我尝试更改窗口大小。

//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>

谢谢你的帮助 ！

标签： javascriptthree.js

解决方案

你实际上并没有渲染你的场景。像这样尝试：

//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/three@0.133.1/build/three.min.js"></script>

推荐阅读