Three.js 当我放入轨道控件时，我的球体或场景将消失
我有一个由三个.js组成的球体Three.js 当我放入轨道控件时，我的球体或场景将消失,three.js,Three.js,我有一个由三个.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.setPixelR
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);
});
var canvas=document.querySelector（'canvas'）；
变量宽度=canvas.offsetWidth，
高度=canvas.offsetHeight；
var renderer=new THREE.WebGLRenderer({
画布：画布，
反别名：是的，
阿尔法：是的
});
渲染器.setPixelRatio（window.devicePixelRatio>1？2:1）；
设置大小（宽度、高度）；
renderer.setClearColor（0x000000,0）；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,300）；
var sphere=new THREE.Group（）；
场景。添加（球体）；
var材料=新的三线基本材料({
颜色：0xfe0e55
});
var linesAmount=40；
var半径=50；
var verticesAmount=900；
对于（var j=0；j好的，就像我说的，我是个初学者，所以请尽量不要翻白眼
我想我只是在索引文件中调用demo4（sphere）脚本的那一行之前调用OrbitControls脚本就解决了这个问题
不过我有一个新问题：整个事情对性能造成了很大的影响。当我运行索引页时，我的整个计算机运行缓慢。好像图形太重了
我将做一些优化方面的研究，今天我花了一整天的时间试图理解脚本是如何构建球体的（我从一个网站上获取的）。我发现很有趣的是，它实际上并没有渲染球体（它是三个球体），只是渲染和更新一个不稳定的球体形状中的线条
尽管这个解决方案令人眼花缭乱，但我还是学到了很多关于three.js试图解决这个问题的知识。我期待着看看它是否可以优化并顺利运行！最好提供一个实时代码示例（代码片段，jsfiddle.net，codepen.io）我对你的大部分代码进行了修改，并添加了OrbitControls
。一切似乎都正常，请参见。顺便说一句：在你的示例代码中，你为mousemove
添加了一个事件侦听器，但没有发布相应的函数。当使用OrbitControls
时，你根本不需要这样的处理程序。非常感谢你，我不知道怎么做参考小提琴上的库，但看到Mugen的示例，我想我现在明白了，对不起！Mugen，非常感谢！鼠标移动侦听器是我没有包含的代码的一部分，它以不同的方式在球体之间移动。我想我也应该取消EventListener。感谢您花费时间和帮助我在你的代码中，当我添加UpdateVertices函数时，它不起作用。所以我认为它一定与该函数有关。
<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>