当我放进OrbitControls时，我的球体或场景就消失了
当我放进OrbitControls时，我的球体或场景就消失了
提问于 2018-06-13 14:57:34
我有一个用three.js做的球体
var canvas = document.querySelector('canvas');
var width = canvas.offsetWidth,
height = canvas.offsetHeight;
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0x000000,0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 300);
var sphere = new THREE.Group();
scene.add(sphere);
var material = new THREE.LineBasicMaterial({
color: 0xfe0e55
});
var linesAmount = 40;
var radius = 50;
var verticesAmount = 900;
for(var j=0;j<linesAmount;j++){
var index = j;
var geometry = new THREE.Geometry();
geometry.y = (index/linesAmount) * radius*2;
for(var i=0;i<=verticesAmount;i++) {
var vector = new THREE.Vector3();
vector.x = Math.cos(i/verticesAmount * Math.PI*2);
vector.z = Math.sin(i/verticesAmount * Math.PI*2);
vector._o = vector.clone();
geometry.vertices.push(vector);
}
var line = new THREE.Line(geometry, material);
sphere.add(line);
}
function updateVertices (a) {
for(var j=0;j<sphere.children.length;j++){
var line = sphere.children[j];
line.geometry.y += 0.1;
if(line.geometry.y > radius*2) {
line.geometry.y = 0;
}
var radiusHeight = Math.sqrt(line.geometry.y * (2*radius-line.geometry.y));
for(var i=0;i<=verticesAmount;i++) {
var vector = line.geometry.vertices[i];
var ratio = noise.simplex3(vector.x*0.009, vector.z*0.009 + a*0.0006, line.geometry.y*0.009) * 15;
vector.copy(vector._o);
vector.multiplyScalar(radiusHeight + ratio);
vector.y = line.geometry.y - radius;
}
line.geometry.verticesNeedUpdate = true;
}
}
function render(a) {
requestAnimationFrame(render);
updateVertices(a);
renderer.render(scene, camera);
}
function onResize() {
canvas.style.width = '';
canvas.style.height = '';
width = canvas.offsetWidth;
height = canvas.offsetHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
requestAnimationFrame(render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function(){
resizeTm = clearTimeout(resizeTm);
resizeTm = setTimeout(onResize, 200);
});/
<body class="demo-4">
<main>
<div class="content">
<canvas class="scene scene--full" id="scene"></canvas>
<div class="content__inner">
<h2 class="content__title"></h2>
<h3 class="content__subtitle"></h2>
</div>
</div>
</main>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/demo.js"></script>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/three.min.js"></script>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/perlin.js"></script>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/TweenMax.min.js"></script>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/demo4.js"></script>
<script src="/Users/VICSIDIOUS/Desktop/WWW/WWW.VICSIDIOUS.COM/VICSIDIOUS_2018/OrbitControls.js"></script>
</body>但是当我试图添加OrbitControls时，一切都消失了。
- 是的，我指的是OrbitControl.js
- 我试过用domElement
- 我已经疯狂地调整了相机，仍然没有运气
我想我的问题是，对于任何熟悉three.js的人来说，代码中有什么可能与OrbitControls冲突吗？
两周前我就开始学习web了。请记住这一点，我只是希望学习，并尽我最大的努力不问问题，而不是先研究了很多。
非常感谢。
回答 1
Stack Overflow用户
发布于 2018-06-14 10:03:16
好的，就像我说的，我是一个初学者，所以请尽量不要滚动你的眼睛！
我想我是通过在索引文件中调用demo4 (球形)脚本的行之前调用demo4脚本来解决这个问题的。
，我有一个新的问题，：整个事情是对性能造成很大的影响。当我运行索引页时，我的整个计算机运行得很慢。好像图形太重了吗？
我将做一些关于优化的研究，我今天花了一整天的时间来理解脚本是如何构建这个领域的(我从一个网站上获得了它)。我发现有趣的是，它实际上不是渲染一个球体(它是一个三)，它只是以一个摆动的球面形状呈现和更新线条。
尽管解决方案很难解决，我还是学到了很多关于three.js试图解决这个问题的知识。期待着看看它是否能被优化和使运行顺利！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50840386
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号