8.4w+
社区成员
- 主页
- 问答
入门THREEJS遇到的问题求大佬解惑
引入OrbitControls.js后报
原因是浏览器不能识别require
然后看到这个贴子
https://blog.csdn.net/wml00000/article/details/84181227
用这个browserify方法翻译了一遍OrbitControls.js
还是不能动
咋整啊
原因是浏览器不能识别require
然后看到这个贴子
https://blog.csdn.net/wml00000/article/details/84181227
用这个browserify方法翻译了一遍OrbitControls.js
还是不能动
咋整啊
...全文
请发表友善的回复…
发表回复
河南棒小伙 2019-07-05
直观感觉是js文件有问题，去官网下一个完整的引入得了。
Jam2018 2019-07-05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单Demo</title>
<script src='./three.js'></script>
<!-- <script src='./OrbitControls.js'></script> -->
<script src="./dist/dist.js"></script>
<style>
* {
margin: 0;
padding: 0
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="canvas">
</div>
<script>
var threeObj = {
scene: null,
camera: null,
cube: null,
renderer: null,
controls: null,
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
initScene: function () {
//添加坐标系
var ax = new THREE.AxesHelper(100);
this.scene = new THREE.Scene();
//全局雾化
this.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000)
this.scene.add(ax);
},
initCamera: function () {
this.camera = new THREE.PerspectiveCamera(60, this.width / this.height, 0.1, 1000);
this.camera.position.set(100, 100, 100);
this.camera.lookAt(0, 0, 0);
},
initRenderer: function () {
this.renderer = new THREE.WebGLRenderer({
antialias: true
})
this.renderer.setSize(this.width, this.height);
this.renderer.setClearColor(0xD1BEBE);
document.getElementById('canvas').appendChild(this.renderer.domElement);
},
initLight: function () {
var light = new THREE.DirectionalLight(0x695DEE);
light.position.set(100, 0, 10);
this.scene.add(light);
},
initGeometry: function () {
var geometry = new THREE.CubeGeometry(25, 55, 20, 3, 3, 3);
//使用Phong光照模型的材质，适合镜面、金属等
var material = new THREE.MeshPhongMaterial({
color: 0xF2415E,
wireframe: true
});
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);
},
initControl: function () {
var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
// 使用阻尼,指定是否有惯性
controls.enableDamping = true;
// 动态阻尼系数 就是鼠标拖拽旋转灵敏度，阻尼越小越灵敏
controls.dampingFactor = 0.25;
// 是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最近距离
controls.minDistance = 10;
//设置相机距离原点的最远距离
controls.maxDistance = 600;
//是否开启右键拖拽
controls.enablePan = true;
this.controls = controls;
},
render: function () {
//这里不能直接用this.render,第二次调用自身时,this就变成了window
//requestAnimationFrame的this是window对象，如同setTimeout,setinterval
requestAnimationFrame(this.render.bind(this));
this.cube.rotation.y += 0.01;
this.controls.update();
this.renderer.render(this.scene, this.camera);
},
init: function () {
window.onresize = onWindowResize;
this.initScene();
this.initCamera();
this.initRenderer();
this.initLight();
this.initGeometry();
this.initControl();
this.render();
},
}
function onWindowResize() {
threeObj.camera.aspect = document.documentElement.clientWidth / document.documentElement.clientHeight;
threeObj.camera.updateProjectionMatrix();
threeObj.renderer.setSize(threeObj.width, threeObj.height);
threeObj.renderer.render(threeObj.scene, threeObj.camera);
}
threeObj.init();
</script>
</body>
</html>
