使用WebGL和Three.js库来展示3D对象。以下是一个简单的示例,可以直接在HTML文件中嵌入代码。
首先,您需要在头部添加Three.js库和您的JavaScript文件:
接下来,您需要一个HTML元素来容纳您的3D对象。例如,您可以使用一个DIV元素:
然后,在您的JavaScript文件中,您可以创建一个场景、相机和渲染器:
var scene = new THREE.Scene();
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("canvas").appendChild( renderer.domElement );
现在,您可以向场景中添加3D对象,例如一个立方体:
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
最后,您需要在每个帧更新渲染器:
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
现在,您已经成功地在没有iFrames的情况下展示了一个3D对象。可以通过添加更多的对象和灯光来创建更复杂的场景。