在这里插入图片描述
在创建控件对象时添加 this.controls.autoRotate = true // 是否自动旋转 只添加这一句是不行的,
只有在动画循环中调用controls.update()时,才可以使用OrbitControls.autoRotate。不能将自动旋转与on-demand呈现结合使用(这意味着使用控件的change事件侦听器)
上代码:
初始化场景的时候调用下面的两个方法(创建控件对象、最后渲染)

this.createControls() // 创建控件对象       
this.render() // 最后进行渲染

第一步开启自动旋转
this.controls.autoRotate = true

// 创建控件对象
        createControls() {
            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
            this.controls.enablePan = true // 是否开启右键拖拽
            this.controls.maxPolarAngle = 1.5 // 上下翻转的最大角度
            this.controls.minPolarAngle = 0.0 // 上下翻转的最小角度
            this.controls.autoRotate = true // 是否自动旋转
            // this.controls.enableZoom = false // 是否可以缩放 默认是true
            this.controls.dampingFactor = 0.5 // 动态阻尼系数 就是鼠标拖拽旋转灵敏度,阻尼越小越灵敏

第二步,最后的渲染
this.controls.update();

render() {
            let animate = () => {
                //循环调用函数
                this.clearAnim = requestAnimationFrame(animate)
                this.controls.update();
                //渲染界面
                this.renderer.render(this.scene, this.camera)
            animate()
            //  为模型绑定点击事件
            this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)

二、模型位置改变

object模型对象中会返回各种属性,其中有个position字段关乎位置信息,里面有x、y、z三个轴的位置信息,通过xx.position.x = 0,可设置位置,坐标轴也是同等原理

loadFbxModel() {
            const loader = new FBXLoader();
            loader.load('/model/fbx/house_true.fbx', object => {
                object.traverse( child => {
                if ( child.isMesh ){
                    child.castShadow = true;
                    child.receiveShadow = true;
                console.log(object)
                object.scale.set(40,40,40)
                object.position.x = 0
                object.position.y = -80
                object.position.z = 0
                this.scene.add(object);//模型
                    只有在动画循环中调用controls.update()时,才可以使用OrbitControls.autoRotate。不能将自动旋转与on-demand呈现结合使用(这意味着使用控件的change事件侦听器)只添加这一句是不行的,在创建控件对象时添加。.........
<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
 有关工作原理的详细说明,请查看的和。
注意,这里设置的数值是弧度,需要和角度区分开
角度  转  弧度   MathUtils.degToRad(deg)
弧度  转  角度   MathUtils.radToDeg (rad)
rotateOnAxis  在局部空间中绕着该物体的轴来旋转一个物体
var rectShape = new THREE.Shape();
   	rectShape.moveTo( 0, 0 );
   	rectShape.lineTo( 0, rectWidth );
   	rectShape.lineTo( rectLength, rectWidth );
   	rectShape.lineT...
<script type="text/javascript">
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os...