• Three.js 中的参数调试控制插件dat.GUI.JS


    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值。在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求。 通过该库,我们就不需要通过手动修改源码来观察不同参数对模型的效果影响。
    demo效果如下:

    ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102004608083-2026036975.gif)

    关键代码
    入口文件:

    function init() {
        var stats = initStats();
        var renderer = initRenderer();
        var camera = initCamera();
        var scene = new THREE.Scene();
        var clock = new THREE.Clock();
    
        initDefaultLighting(scene);
        initModel()
        initControls();
        render();
        draw(scene,renderer,camera);
    
        function initModel() {
            //辅助工具
            var helper = new THREE.AxesHelper(900);
            scene.add(helper);
            // var map = new THREE.TextureLoader().load("./assets/jay.jag");
            //外部盒子
            // var material = new THREE.MeshLambertMaterial({
            //     // map: map
            //     color: 0xffffff,
            // });
            // material.transparent = true;
            // material.opacity = 0.4;
    
            //--------------------------------地板--------------------------
            var planeGeometry = new THREE.PlaneGeometry(1000, 1000, 50, 50);
            var planeMaterial = new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            });
            planeMaterial.transparent = true;
            planeMaterial.opacity = 0.2;
    
            plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = -6;
            plane.position.z = 0;
    
    
            //告诉底部平面需要接收阴影
            plane.receiveShadow = true;
    
            scene.add(plane);
            // scene.add(PlaneSegs);
            //--------------------------------地板end-----------------------
        }
    
        //初始化控制器
        var obtControls; //定义控制器变量
        function initControls() {
            //定义控制器核心           
            obtControls = new THREE.OrbitControls(camera, renderer.domElement);
    
            // 如果使用animate方法时,将此函数删除
            // controls.addEventListener('change', render);
            //以下都是为了满足各种需求的各种控制器配置参数
            obtControls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性
            obtControls.enableZoom = true; //是否允许缩放
            obtControls.enablePan = true; //是否开启鼠标右键拖拽
            obtControls.autoRotate = false; //是否允许自动旋转
            obtControls.dampingFactor = 0.25; //动态阻尼系数:就是鼠标拖拽旋转灵敏度
            obtControls.minDistance = 200; //设置相机距离原点的最近距离;
            obtControls.maxDistance = 1000; //设置相机距离原点的最远距离;
    
        }
        //控制更新
        function render() {
            stats.update();
            // fpControls.update(clock.getDelta());
            obtControls.update(clock.getDelta());
            requestAnimationFrame(render);
            renderer.render(scene, camera)
        }
    
    }
    

    模型文件

    function draw(scene,renderer,camera) {
    //方体
    var cubeGeometry = new THREE.BoxGeometry(20,20,20);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color:0xffaaaa,
        wireframe:true
    });
    var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
    cube.position.x = 0;  cube.position.y = 10;  cube.position.z = 80;
    cube.castShadow  = true;
    cube.onBeforeRender = function(){
        this.rotation.x += 0.02;
        this.rotation.y += 0.02;
        this.rotation.z += 0.02;
    }
    scene.add(cube)
    
    //球体
    var sphereGeometry = new THREE.SphereGeometry(20,40,50);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color:0x777777,
        wireframe: true
    });
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    sphere.castShadow  = true;
    var step = 0;
    sphere.onBeforeRender = function(){
    step += 0.04;
    sphere.position.x = 20 + (10*(Math.cos(step)));
    sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
    }
    
    scene.add(sphere)
    
    //添加dat.GUI调试控制
    var controls = new function(){//以下关键
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    }
    var gui = new dat.GUI();
    gui.add(controls,'rotationSpeed',0,0.5);
    gui.add(controls,'bouncingSpeed',0,0.5);
    renderScene();
    function renderScene(){
        cube.rotation.x += controls.rotationSpeed;
        cube.rotation.y += controls.rotationSpeed;
        cube.rotation.z += controls.rotationSpeed;
        step += controls.bouncingSpeed;
        sphere.position.x = 20 +(10*(Math.cos(step)));
        sphere.position.y = 20 +(10*Math.abs(Math.sin(step)));
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera)
    
    }
    
    
    //地面
    var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
    var planeMaterial = new THREE.MeshPhongMaterial({
        color:0x222222,
        side: THREE.Double
    });
    var plane = new THREE.Mesh(planeGeometry,planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = -5;
    plane.position.z = 0
    plane.receiveShadow   = true;
    scene.add(plane)
    
    //灯光
    var spotlight = new THREE.SpotLight(0xffffff);
    spotlight.position.set(-40,60,-10);
    spotlight.castShadow = true
    scene.add(spotlight);
    
    
    }
    

    该demo完整代码在这里:Link

  • 相关阅读:
    Tensorflow安装环境更新
    IE请求访问的设置
    eclipse安装JAVA反编译插件
    eclipse导入JDK源码
    org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'PUT' not supported
    Linux学习笔记——使用指定的用户权限执行程序——sudo
    Linux学习笔记——查看Linux系统信息的方法
    Linux学习笔记——切换并取代用户身份命令——su
    JS实现电子时钟
    鼻炎
  • 原文地址:https://www.cnblogs.com/jaycethanks/p/12131109.html
Copyright © 2020-2023  润新知