Javascript 嵌入三维模型查看器
我正在尝试实现3D模型查看器，但是我希望将其嵌入到已设置的div中，而不是像这样创建一个新的div。因此，我像这样编辑了代码，但它不起作用。任何帮助都将不胜感激Javascript 嵌入三维模型查看器,javascript,html,three.js,embed,Javascript,Html,Three.js,Embed,我正在尝试实现3D模型查看器，但是我希望将其嵌入到已设置的div中，而不是像这样创建一个新的div。因此，我像这样编辑了代码，但它不起作用。任何帮助都将不胜感激 <script> // This is where our model viewer code goes. var container; var camera, scene, renderer; var mouseX = 0, mouseY = 0; var windowHalfX
<script>
// This is where our model viewer code goes.
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = document.getElementById('viewer').clientHeight / 2;
var windowHalfY = document.getElementById('viewer').clientHeight / 2;
init();
animate();
// Initialize
function init() {
// This <div> will host the canvas for our scene.
container = document.getElementById( 'viewer' );
//document.body.appendChild( container );
// You can adjust the cameras distance and set the FOV to something
// different than 45°. The last two values set the clippling plane.
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// These variables set the camera behaviour and sensitivity.
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
// This is the scene we will add all objects to.
scene = new THREE.Scene();
// You can set the color of the ambient light to any value.
// I have chose a completely white light because I want to paint
// all the shading into my texture. You propably want something darker.
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
// Uncomment these lines to create a simple directional light.
// var directionalLight = new THREE.DirectionalLight( 0xffeedd );
// directionalLight.position.set( 0, 0, 1 ).normalize();
// scene.add( directionalLight );
// Texture Loading
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
// You can set the texture properties in this function.
// The string has to be the path to your texture file.
loader.load( 'img/sickletexture.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
// I wanted a nearest neighbour filtering for my low-poly character,
// so that every pixel is crips and sharp. You can delete this lines
// if have a larger texture and want a smooth linear filter.
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestMipMapLinearFilter;
} );
// OBJ Loading
var loader = new THREE.OBJLoader( manager );
// As soon as the OBJ has been loaded this function looks for a mesh
// inside the data and applies the texture to it.
loader.load( 'obj/sickle.obj', function ( event ) {
var object = event;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
// My initial model was too small, so I scaled it upwards.
object.scale = new THREE.Vector3( 2, 2, 2 );
// You can change the position of the object, so that it is not
// centered in the view and leaves some space for overlay text.
object.position.y -= 2.5;
scene.add( object );
});
// We set the renderer to the size of the window and
// append a canvas to our HTML page.
renderer = new THREE.WebGLRenderer();
renderer.setSize( document.getElementById('viewer').innerWidth, document.getElementById('viewer').innerHeight );
container.appendChild( renderer.domElement );
}
// The Loop
function animate() {
// This function calls itself on every frame. You can for example change
// the objects rotation on every call to create a turntable animation.
requestAnimationFrame( animate );
// On every frame we need to calculate the new camera position
// and have it look exactly at the center of our scene.
controls.update();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
//这就是我们的模型查看器代码所在。
var容器；
摄像机、场景、渲染器；
var mouseX=0，mouseY=0；
var windowHalfX=document.getElementById（'viewer'）.clientHeight/2；
var windowHalfY=document.getElementById（'viewer'）.clientHeight/2；
init（）；
制作动画（）；
//初始化
函数init（）{
//这将为我们的场景主持画布。
container=document.getElementById（'viewer'）；
//文件.正文.附件（容器）；
//您可以调整摄影机距离并将FOV设置为某个值
//不同于45°。最后两个值设置剪辑平面。
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=100；
//这些变量设置相机行为和灵敏度。
控件=新的三个轨迹球控件（摄像头）；
controls.rotateSpeed=5.0；
controls.zoomSpeed=5；
控制。速度=2；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=true；
controls.dynamicDampingFactor=0.3；
//这是我们将向其中添加所有对象的场景。
场景=新的三个。场景（）；
//可以将环境光的颜色设置为任何值。
//我选择了一个完全白色的灯光，因为我想画画
//我的纹理中的所有阴影。你可能想要更暗的东西。
var环境光=新的三个环境光（0xffffff）；
场景。添加（环境光）；
//取消注释这些线以创建简单的平行光。
//var方向灯=新的三个方向灯（0xffeedd）；
//directionalLight.position.set（0,0,1）.normalize（）；
//场景。添加（方向光）；
//纹理加载
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var texture=new THREE.texture（）；
var loader=new THREE.ImageLoader（管理器）；
//可以在此函数中设置纹理特性。
//字符串必须是纹理文件的路径。
load（'img/sickletexture.png'，函数（图像）{
纹理.图像=图像；
texture.needsUpdate=true；
//我想为我的低多边形角色设置一个最近邻过滤，
//所以每个像素都是尖锐的。你可以删除这些线
//如果有较大的纹理，并且需要平滑的线性过滤器。
texture.magFilter=3.NearestFilter；
texture.minFilter=3.NearestMipMapLinearFilter；
} );
//OBJ加载
var装入器=新的三个。对象装入器（管理器）；
//加载OBJ后，此函数将查找网格
//在数据内部，并对其应用纹理。
loader.load（'obj/镰刀.obj'，函数（事件）{
var对象=事件；
遍历（函数（子对象）{
if（三个.Mesh的子实例）{
child.material.map=纹理；
}
} );
//我最初的模型太小了，所以我把它放大了。
object.scale=新的三个向量3（2,2,2）；
//可以更改对象的位置，使其不受影响
//在视图中居中，并为覆盖文本留出一些空间。
对象位置y-=2.5；
场景。添加（对象）；
});
//我们将渲染器设置为窗口的大小，然后
//将画布附加到我们的HTML页面。
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（document.getElementById（'viewer'）.innerWidth，document.getElementById（'viewer'）.innerHeight）；
container.appendChild（renderer.doElement）；
}
//环路
函数animate（）{
//此函数在每一帧上调用自身。例如，您可以更改
//对象在每次调用时旋转以创建转盘动画。
请求动画帧（动画）；
//在每一帧上，我们需要计算新的摄像机位置
//让它准确地看到我们场景的中心。
控件更新（）；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}
在一个单独的html文档中创建3D（使用原始脚本，而不是OP中编辑的脚本），然后在div中
在一个单独的html文档中创建3D（使用原始脚本，而不是OP中编辑的脚本），然后在div
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - vrml loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
threewindow {
border: 1px solid black;
}
</style>
<script src="../three.js/build/three.min.js"></script>
<script src="../three.js/examples/js/controls/TrackballControls.js"></script>
<script src="../three.js/examples/js/loaders/VRMLLoader.js"></script>
<script src="../three.js/examples/js/Detector.js"></script>
<script src="../three.js/examples/js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
function init() {
alert("init");
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
scene = new THREE.Scene();
scene.add( camera );
var sphereMaterial =
new THREE.MeshLambertMaterial(
{
color: 0xCC0000
});
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//child.material.map = texture;
//child.material = sphereMaterial;
child.material.side = THREE.DoubleSide;
}
} );
scene.add(object);
} );
// loader.load( "models/vrml/house.wrl" );
loader.load( "cayley.wrl" );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize(200, 200);
document.getElementById("threewindow").appendChild(renderer.domElement);
// container = document.createElement( 'div' );
// document.body.appendChild( container );
// container.appendChild( renderer.domElement );
// stats = new Stats();
// stats.domElement.style.position = 'absolute';
// stats.domElement.style.top = '0px';
// container.appendChild( stats.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
//stats.update();
}
</script>
</head>
<body onload="init()">
<h1>Cubic surfaces</h1>
<p>All the surfaces defined by cubics equations.</p>
<ul><li><a href="parade/Cubics.php">Singularities of cubic surfaces</a>.</li>
<li>A <a href="parade/index.html">pictorial introduction</a> to singularity theory.</li>
</ul>
<div id="threewindow"></div>
</body>
</html>
three.js webgl-加载程序-vrml加载程序
三窗{
边框：1px纯黑；
}
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
摄像机、控件、场景、渲染器；
变量交叉；
函数init（）{
警报（“初始”）；
摄像头=新的三个透视摄像头（60，窗内宽度/窗内高度，0.01，1e10）；
摄像机位置z=6；
控件=新的三个轨迹球控件（摄像头）；
controls.rotateSpeed=5.0；
controls.zoomSpeed=5；
controls.panSpeed=2