使用three.js渲染场景
使用three.js渲染场景
提问于 2021-09-27 09:55:13
我不知道为什么渲染器没有在场景中显示球体。如果我在代码中遗漏了什么，那么我是three.js的新手吗？请让我知道。
function solar_system()
{
const canvas = document.querySelector('c');
const renderer = new THREE.WebGLRenderer(canvas);
const camera = new THREE.PerspectiveCamera(70,2,0.1,1000);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
//One sphere geometry for each sphere
const radius = 1;
const widthSegments = 6;
const heightSegments = 6;
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
//Making of Sun
const sunMaterial = new THREE.MeshPhongMaterial({emissive:0xFFFF00});
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
scene.add(sunMesh);
renderer.render(scene,camera);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Solar_System</title>
<script type="text/javascript" src = "../../../libs/three/three.js"></script>
<script type="text/javascript" src = "../javascript/solar_system.js"></script>
<link rel="stylesheet" href="../css/solar_system.css">
</head>
<body>
<canvas id="c" width="300" height="300"></canvas>
<script type="text/javascript">
(function(){
solar_system()
})();
</script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-27 13:45:05
您的代码中有几个问题：
- 查询选择器是错误的。它应该是
#c. - You相机定位在原点，因此“在”球状网格内。
- ，
WebGLRenderer的领头人，并不需要画布，而是parameters对象。
。
请这样试一试：
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({
canvas
});
const camera = new THREE.PerspectiveCamera(70, 1, 0.1, 1000);
camera.position.set(0, 0, 10);
const scene = new THREE.Scene();
//One sphere geometry for each sphere
const radius = 1;
const widthSegments = 6;
const heightSegments = 6;
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
//Making of Sun
const sunMaterial = new THREE.MeshPhongMaterial({
emissive: 0xFFFF00
});
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
scene.add(sunMesh);
renderer.render(scene, camera);body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69344673
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号