Question

我有一个用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冲突的内容？

两周前，我开始学习网络开发。请记住这一点，我只是想学习并尽力不先提问而不先研究。

非常感谢你。

Answer 1

好的，就像我说的，我是初学者，所以请尽量不要睁开眼睛！

我想我只是在我在索引文件中调用demo4（sphere）脚本的行之前调用OrbitControls脚本来解决它。

我遇到了一个新问题：整个事情对性能产生了巨大的影响。当我运行索引页面时，我的整个计算机运行缓慢。它的图形太重了吗？

我将对优化进行一些研究，今天我整天都在努力了解脚本是如何构建球体的（我是从网站上获取的）。我觉得有趣的是它实际上没有渲染一个球体（它只是一个三个），它只是以一个摇摆的球形渲染和更新线条。

尽管解决方案是虎头蛇尾，但我学到了很多关于三个试图解决这个问题的问题。期待看它是否可以优化并使其顺利运行！

当我放入OrbitControls时，我的球体或场景消失了

1 个答案: