将three.js场景与网页结合起来作为背景

Question

我创建了两个单独的html文档。一个是渲染three.js场景和基本html页面的地方。我的问题是我如何正确地将它们组合起来？我的目标是在左角创建旋转的绿色立方体并移动红色立方体，它将从左侧移动到右侧。在灰色内容区域移动时，红色立方体应该是不可见的。

三。 js：

cube.position.x

注意：我尝试使用cube.translateX，three.cube.position.x和close()移动绿色多维数据集。但这没有用，所以我通过移动相机解决了这个问题，但我不相信这样做的正确方法。

可以在此处找到

HTML 文档，我想要导入场景JSfiddle

Answer 1

如果您想在网页中实现three.js场景，请在您想要的基本HTML页面中创建一个div。

<div id=""myScene"></div>

并在脚本中而不是：

document.body.appendChild( renderer.domElement );

写：

document.getElementById("myScene").appendChild( renderer.domElement );

代码段：

＆＃13;

＆＃13;

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );

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.getElementById("myScene").appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
//cube.position.x = 100;
//cube.translateX = 100;
//three.cube.position.x = 100;
scene.add( cube );

camera.position.z = 10;    
camera.position.x = 10;

var geometry_2 = new THREE.BoxGeometry( 2, 2, 2 );
var material_2 = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cube_2 = new THREE.Mesh( geometry_2, material_2 );
scene.add( cube_2 );


function animate() {
requestAnimationFrame( animate );
cube.rotation.y += 0.01;
cube_2.position.x += 0.05;
renderer.render( scene, camera );
}
animate();

＆＃13;

canvas { 
    width: 100%;
    height: 100% 
}
.blue {
    color: #ffffff;  
    background-color: red;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
p {
   text-align: center;
   color: #ffffff;
}
.content {
    background-color: #e6e6e6;
    display: block;
    float: none;
    margin: 0 auto;
    overflow:hidden;
    width:400px;
    min-height: calc(100vh - 121px);
}
.footer {
    color: #ffffff;  
    background-color: red;
    display: block;
    float: none;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:30px;
}
body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    font-size: 14px;
    overflow-x:hidden;
    min-height: 100%;
}
html {
    position:relative;
    min-height: 100%;
}

＆＃13;

<div >
    <div class=blue>Header</div>
    <p style=color:red>LOGO</p>
    <div class="blue">Navigation Bar</div>
    <div id="myScene" class="content">
        Content.
        <div class="footer">Footer</div>
    </div>
</div>

<script src="https://threejs.org/build/three.min.js"></script>

＆＃13;

＆＃13;

＆＃13;