请告诉我如何显示项目。
html
<head>
<meta charset="UTF-8"/>
<title>name</title>
<style>
body {
padding:0;
margin: 0;
}
canvas { width: 100%; height: 100%; }
#program3d {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<script src="js\Sistem\three.js"></script>
<script src="js\Loader\OBJLoader.js"></script>
<script src="js\Sistem\TrackballControls.js"></script>
<script src="js\Sistem\mucode.js"></script>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHD4lDk5cupCKwwEl78HwEgL6lfk1WcsVq88FTSe2xpVGN_n4s" width="175px"/> <br/>
<div id="program3d"></div>
<input type="button" id="B1" value="Start" name="button1" onclick="A1(); style.display='none'" ><br/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHD4lDk5cupCKwwEl78HwEgL6lfk1WcsVq88FTSe2xpVGN_n4s" width="175px"/> <br/>
</body>
</html>
JS
function A1(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(65,window.innerWidth/window.innerHeight, 0.1, 10000);
container = document.getElementById( 'program3d' );
document.body.appendChild( container );
var render = new THREE.WebGLRenderer();
render.setSize(window.innerWidth, window.innerHeight);
container.appendChild( render.domElement );
render.setClearColor ( 0xC8C7C7 );
camera.position.z= 5;
camera.position.x= 0;
camera.position.y= 0;
var ambientLight = new THREE.AmbientLight ( 0xfffef5, 0.45 );
scene.add (ambientLight);
var directionalLight = new THREE.DirectionalLight (0xfff2e8, 0.8 );
directionalLight.position.set (0.1, 1, 0.2);
scene.add(directionalLight);
var light1 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light1);
var light2 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light2);
var light3 =new THREE.PointLight(0xFFFFFF, 4 , 30);
//scene.add (light3);
var update = function (){
var time = Date.now() * 0.0005;
light1.position.x = Math.sin ( time * 0.7) * 30;
light1.position.y = Math.cos ( time * 0.5) * 40;
light1.position.z = Math.cos ( time * 0.3) * 30;
light2.position.x = Math.cos ( time * 0.3) * 30;
light2.position.y = Math.sin ( time * 0.5) * 40;
light2.position.z = Math.sin ( time * 0.7) * 30;
light3.position.x = Math.sin ( time * 0.7) * 30;
light3.position.y = Math.cos ( time * 0.3) * 40;
light3.position.z = Math.sin ( time * 0.3) * 30;
};
var manager = new THREE.LoadingManager();
var loader = new THREE.ImageLoader(manager);
var masif = [
THREE.OBJLoader,
THREE.MMDLoader];
var meshes = [];
var objLoader = new masif [0]();
objLoader.load ('models/bas2.obj', function (object){
console.log(object);
object.traverse (function (child)
{
if (child instanceof THREE.Mesh)
{
meshes.push(child);
}
});
var mesh1 = meshes [2];
mesh1.position.y = 0;
var textureBody = new THREE.Texture();
loader.load ('tex/Base4.png', function (image){
textureBody.image = image;
textureBody.needsUpdate = true;
});
var bumpMapBody = new THREE.TextureLoader().load('tex/untitled2-NM_u0_v0.tif');
mesh1.material = new THREE.MeshPhongMaterial({
wireframeLinecap : "round",
wireframeLinejoin : "round",
map: textureBody
});
meshes.forEach(function(entry){
scene.add(entry);
});
});
var controls = new THREE.TrackballControls (camera);
var rendering =function() {
controls.update();
render.render(scene, camera);
};
var GameLoop = function(){
requestAnimationFrame (GameLoop);
update();
rendering();
};
GameLoop();
rendering();
};
因此（画布）严格位于div program3d中
并且不会超出
我能够将其转移到
容器= document.getElementById（'program3d'）;
但是由于某些原因，单击按钮后，窗口仍会飞到末尾（主体）并占据整个页面
请告诉我如何解决。
