效果圖：
要求是要能支持VR眼鏡觀看，就是要能分屏
沒有系統的去學three.js，只是爲了實現效果。
以下代碼只需要更換stl文件就可以。
var scene = new THREE.Scene();//場景容器
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//設置相機,（fov 可視角度，aspect 爲width/height,通常設置爲canvas元素的高寬比，near近端距離，far遠端距離）。只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。
camera.position.z = 8;//相機位置，數值越大越遠,越小越近
var renderer = new THREE.WebGLRenderer({//創建渲染器,用來將物體渲染到屏幕上
antialias: true, //antialias:true/false 是否開啓反鋸齒
alpha: true //alpha:true/false 是否可以設置背景色透明
});
var VrRender = new THREE.StereoEffect(renderer);//VR分屏
//VrRender.setEyeSeparation(0);設置兩眼的間距
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);//調整渲染視角
renderer.gammaInput = true;//紋理和顏色都會預乘gamma。 默認值是false,大概就是調整一些因爲比例縮放而導致的視覺bug
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;//在場景中使用陰影貼圖，想了解：https://blog.csdn.net/linuxheik/article/details/53842266
var light = new THREE.AmbientLight(0x404040); //實例環境光源，瞭解：https://blog.csdn.net/qq_30100043/article/details/77203329
scene.add(light);//向場景添加燈光
整段代碼
js文件官網下載就好，我也有上傳了github，需要可以私聊
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雙屏顯示案例</title>
<style type="text/css">
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
#img{position: absolute;width: 45px;height: 30px;bottom: 30px;right: 50px;z-index: 10;cursor: pointer;}
</style>
</head>
<body>
<img src="img/panorama_512px_1169773_easyicon.net.png" id="img" />
</body>
<script src="js/three.js-master/build/three.js"></script>
<script src="js/three.js-master/examples/js/effects/StereoEffect.js"></script>
<script src="js/three.js-dev/examples/js/vr/WebVR.js"></script>
<script src="js/STLLoader.js"></script>
<script>
var scene = new THREE.Scene();//場景容器
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//設置相機,（fov 可視角度，aspect 爲width/height,通常設置爲canvas元素的高寬比，near近端距離，far遠端距離）。只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。
camera.position.z = 8;//相機位置，數值越大越遠,越小越近
var renderer = new THREE.WebGLRenderer({//創建渲染器,用來將物體渲染到屏幕上
antialias: true, //antialias:true/false 是否開啓反鋸齒
alpha: true //alpha:true/false 是否可以設置背景色透明
});
var VrRender = new THREE.StereoEffect(renderer);//VR分屏
//VrRender.setEyeSeparation(0);設置兩眼的間距
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);//調整渲染視角
renderer.gammaInput = true;//紋理和顏色都會預乘gamma。 默認值是false,大概就是調整一些因爲比例縮放而導致的視覺bug
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;//在場景中使用陰影貼圖，想了解：https://blog.csdn.net/linuxheik/article/details/53842266
var light = new THREE.AmbientLight(0x404040); //實例環境光源，瞭解：https://blog.csdn.net/qq_30100043/article/details/77203329
scene.add(light);//向場景添加燈光
var itsVr=false;//這是我設置的，點擊vr分屏效果，可以用ve眼睛看
function vrStart(){
itsVr=!itsVr;
}
var animate = function() {
requestAnimationFrame(animate);
mesh.rotation.y += 0.01; //動畫轉向，速度0.01
mesh.rotation.x += 0.01; //動畫轉向
//mesh.rotation.z+= 0.01;
if (mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}
if(itsVr){
VrRender.setSize(window.innerWidth, window.innerHeight);//設置渲染場景尺寸
VrRender.render(scene, camera);
}else{
renderer.setSize(window.innerWidth, window.innerHeight);//設置渲染場景尺寸
renderer.render(scene, camera);
}
};
document.body.appendChild(renderer.domElement);
loader = new THREE.STLLoader();
loader.load('stl/colored.stl', function(geometry) {
var material = new THREE.MeshPhongMaterial({
ambient: 0xff5533,
color: 0xff5533,
specular: 0x111111,
shininess: 200
});
console.log(geometry);
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0); //設置模型的位置
mesh.rotation.set(-Math.PI / 2, 0, 0);
mesh.scale.set(1, 1, 1);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
animate();
});
scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
function addShadowedLight(x, y, z, color, intensity) {
var directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z);
scene.add(directionalLight);
directionalLight.castShadow = true;
var d = 1;
directionalLight.shadow.camera.left = -d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = -d;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;
directionalLight.shadow.bias = -0.002;
}
addShadowedLight(1, 1, 1, 0xffffff, 1.35);
addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
document.getElementsByTagName("img")[0].addEventListener('click',vrStart);
</script>
</html>