以下是我的代码,ThreeJS场景,我已经检查并重新检查了几个,并且没有语法错误。但到目前为止没有运气。有时它在导入的脚本中确实提供了很少的运行时错误,即#34;无法获得属性' center'未定义或空引用"
请帮助我帮助我,因为我将在下周准备这个项目。
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
var controls, camera, scene, cssScene, glRenderer, cssRenderer;
function createGLRenderer()
{
var glRenderer = new THREE.WebGLRenderer({ alpha:true, antialias:true });
glRenderer.setClearColor("rgb(255, 255, 230)");
glRenderer.setPixelRatio(window.devicePixelRatio);
glRenderer.setSize(window.innerWidth, window.innerHeight);
glRenderer.domElement.style.position = 'absolute';
glRenderer.domElement.style.zIndex = 1;
glRenderer.domElement.style.top = 0;
return glRenderer;
}
function createCSSRenderer()
{
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
glRenderer.domElement.style.zIndex = 0;
cssRenderer.domElement.style.top = 0;
return cssRenderer;
}
function createPlane(w, h, position, rotation)
{
var material1 = new THREE.MeshBasicMaterial({ color: "rgb(255, 0, 0)", opacity: 0.0, side: THREE.DoubleSide });
var geometry1 = new THREE.PlaneGeometry(w, h);
var mesh1 = new THREE.Mesh(material1, geometry1);
mesh1.position.x = position.x;
mesh1.position.y = position.y;
mesh1.position.z = position.z;
mesh1.rotation.x = rotation.x;
mesh1.rotation.y = rotation.y;
mesh1.rotation.z = rotation.z;
return mesh1;
}
function createCssObject(w, h, position, rotation, url)
{
var html = [
'<div style = "width:' + w + 'px; height:' + h + 'px;">',
'<iframe src = "' + url + '" width = "' + w + '" height = "' + h + '">',
'</iframe>',
'</div>'
].join('\n');
var div = document.createElement('div');
$(div).html(html);
var CssObject = new THREE.CSS3DObject(div);
CssObject.position.x = position.x;
CssObject.position.y = position.y;
CssObject.position.z = position.z;
CssObject.rotation.x = rotation.x;
CssObject.rotation.y = rotation.y;
CssObject.rotation.z = rotation.z;
return CssObject;
}
function create3Dpage(w, h, position, rotation, url)
{
var plane = createPlane(w, h, position, rotation);
scene.add(plane);
var cssObject = createCssObject(w, h, position, rotation, url);
cssScene.add(cssObject);
}
function initialize()
{
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 100, 3000);
//controls = new THREE.TrackballControls(camera);
glRenderer = createGLRenderer();
cssRenderer = createCSSRenderer();
document.body.appendChild(cssRenderer.domElement);
cssRenderer.domElement.appendChild(glRenderer.domElement);
scene = new THREE.Scene();
cssScene = new THREE.Scene();
var alight = new THREE.AmbientLight("rgb(255, 255, 255)",0.5);
scene.add(alight);
create3Dpage(1000, 1000, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 0), 'http://adndevblog.typepad.com/cloud_and_mobile');
Render();
}
function Render()
{
//controls.update();
glRenderer.render(scene, camera);
cssRenderer.render(cssScene, camera);
requestAnimationFrame(Render);
}
$(document ).ready(function() {
initialize();
});
</script>