gpt4 book ai didi

three.js - 二十面体几何不渲染

转载 作者:行者123 更新时间:2023-12-02 04:52:56 25 4
gpt4 key购买 nike

我正在学习如何使用 three.js 魔法。我能够绘制立方体并为其制作动画。但是当我将几何体更改为二十面体时,什么也没有出现。

在我的 js src forlder 中,我只有 three.min.js 文件。我需要另一个 .js 文件吗?

这是我的代码示例。我只是一个初学者,并且花了几个小时试图弄清楚这一点。请帮忙。

<body>
<script src="js/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

/*var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);*/

var geometry = new THREE.IcosahedronGeometry( 200,1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: false, wireframeLinewidth: 2 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;

scene.add(pointlight)

camera.position.z = 5;

var render = function () {
requestAnimationFrame(render);

cube.rotation.x += .01;
cube.rotation.y += .01;



renderer.render(scene, camera);
};

render();
</script>
</body>

最佳答案

我知道这是一篇旧帖子,但对于 future 的访问者,这里是用实时代码回答的问题。

我还继续对它进行了一些清理并注释了一些评论以帮助指出我是如何解决您的问题的。

<body>
<script src="https://threejs.org/build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;

var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.x = 10;
pointlight.position.y = 50;
pointlight.position.z = 1000;

scene.add(pointlight)

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var mesh = new THREE.Mesh(
// Notice radius decreased to 2 because it has to be smaller
// than camera.position. If camera is placed inside the mess,
// then we won't see it.
new THREE.IcosahedronGeometry(2, 0),

// I went ahead and added Phong shading in order to make result clearer
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
flatShading: true,
}),
);

scene.add(mesh);

var render = function() {
requestAnimationFrame(render);

// fixed the rotation to reference your mesh
mesh.rotation.x += .01;
mesh.rotation.y += .01;

renderer.render(scene, camera);
};

render();
</script>
</body>

关于three.js - 二十面体几何不渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26046489/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com