请选择 进入手机版 | 继续访问电脑版

01BIM社区

 找回密码
 立即注册

扫一扫,访问微社区

查看: 7141|回复: 3

我的第一个three.js应用

[复制链接]

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
发表于 2022-3-10 08:07:09 | 显示全部楼层 |阅读模式
我的第一个three.js应用

2022年3月10日


回复

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-3-10 08:08:18 | 显示全部楼层
本帖最后由 tzbm123456 于 2022-10-11 07:25 编辑

<!doctype html>

<html>
<head>
        <title>我的第一个three.js应用</title>
        <script src="../build/three.js"></script>
        <script type="text/javascript" src="../examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="../examples/js/renderers/CanvasRenderer.js"></script>
        <script type="text/javascript" src="../examples/js/renderers/Projector.js"></script>
        <script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
        <script type="text/javascript" src="../src/math/Vector3.js"></script>
        <script type="text/javascript" src="../src/math/Matrix4.js"></script>
        <script type="text/javascript" src="../src/helpers/AxesHelper.js"></script>


        <style>
                body { margin: 0; }
                canvas {
                        display: block;
                        cursor: pointer;
                }
               
                #Window1{
                        float: left;
                        border: 1px solid #f00;
                        width: 945px;
                        height: 980px;
                }
                #Window2{
                        float: right;
                        border: 1px solid #f00;
                        width: 945px;
                        height: 980px;
                }
               
               
        </style>


        <script>
                var width,height;
        //一、总体框架
                //1、初始化场景
                var scene;
                function initScene(){
                        scene=new THREE.Scene();
                }
               
                //2、初始化相机
                var camera1;
                function initCamera1(){
                        width=document.getElementById('Window1').clientWidth;
                        height=document.getElementById('Window1').clientHeight;
                        //创建相机camera1
                        camera1=new THREE.PerspectiveCamera(45,width/height,1,10000);
                        camera1.position.x=0;
                        camera1.position.y=300;
                        camera1.position.z=900;
                        camera1.up.x=1;
                        camera1.up.y=0;
                        camera1.up.z=0;
                        console.log(camera1.up);
                }
                var camera2;
                function initCamera2(){
                        width=document.getElementById('Window2').clientWidth;
                        height=document.getElementById('Window2').clientHeight;
                        
                        camera2=new THREE.PerspectiveCamera(45,width/height,1,10000);
                        camera2.position.x=0;
                        camera2.position.y=0;
                        camera2.position.z=900;
                        //console.log(camera2.up);
                }


                //3、初始化渲染器
                var renderer1,renderer2;
                function initRenderer1(){
                        width=document.getElementById('Window1').clientWidth;
                        height=document.getElementById('Window1').clientHeight;
                        
                        //width=window.innerWidth;
                        //height=window.innerHeight,
                        //renderer=new THREE.WebGLRenderer({antialias:true});
                        
                        renderer1 = new THREE.CanvasRenderer();
                        renderer1.setSize(width,height);
                        //document.body.appendChild(renderer.domElement);
                        document.getElementById('Window1').appendChild(renderer1.domElement);
                        renderer1.setClearColor(0xAAAAAA,1.0);
                }
                function initRenderer2(){
                        width=document.getElementById('Window2').clientWidth;
                        height=document.getElementById('Window2').clientHeight;
                        
                        //width=window.innerWidth;
                        //height=window.innerHeight,
                        //renderer=new THREE.WebGLRenderer({antialias:true});
                        
                        renderer2 = new THREE.CanvasRenderer();
                        renderer2.setSize(width,height);
                        //document.body.appendChild(renderer.domElement);
                        document.getElementById('Window2').appendChild(renderer2.domElement);
                        renderer2.setClearColor(0xAAAAAA,1.0);
                }
                //4、初始化控制器
                var controls1;
                function initcontrols1(){
                        //创建相机控制器controls1
                        controls1 = new THREE.OrbitControls(camera1,renderer1.domElement);//创建控件对象
                        controls1.target=new THREE.Vector3(0,300,0);
                        //更新相机内容
                        controls1.update()
                }
                var controls2;
                function initcontrols2(){
                        //创建相机控制器controls1
                        controls2 = new THREE.OrbitControls(camera2,renderer2.domElement);//创建控件对象


                }

回复 支持 反对

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-3-16 12:44:21 | 显示全部楼层
本帖最后由 tzbm123456 于 2022-10-11 07:25 编辑

        //二、场景内容
                //1、灯光
                var light;
                function initLight(){
                        light=new THREE.DirectionalLight(0xFF0000,1.0,0);
                        light.position.set(100,100,200);
                        scene.add(light);
                }
                //2、实体
                function initObject(){
                //添加坐标实体axesHelper
                        var axesHelper = new THREE.AxesHelper( 100 );
                        scene.add( axesHelper );
                //添加线实体
                        var material=new THREE.LineBasicMaterial({
                                vertexColors:true,
                                color:new THREE.Color(0xff0000),
                                linewidth:5
                        });
                        var color1=new THREE.Color(0x444444),color2=new THREE.Color(0xFF0000);
                        
                        var pt1=new THREE.Vector3(-100,-100,0);
                        var pt2=new THREE.Vector3(100,100,0);
                        var geometry=new THREE.Geometry();
                        geometry.vertices.push(pt1);
                        geometry.vertices.push(pt2);
                        geometry.colors.push(color1,color2);
                        var line=new THREE.Line(geometry,material,THREE.LineSegments);
                        
                        var matrixT=new THREE.Matrix4();
                        matrixT.makeTranslation(-50,50,50);
                        var matrixR=new THREE.Matrix4();
                        matrixR.makeRotationZ(Math.PI/4);
                        
                        var matrixRT=new THREE.Matrix4();
                        matrixRT.multiplyMatrices(matrixT,matrixR);
                        line.applyMatrix(matrixRT)
                        
                        //line.applyMatrix(matrixT)
                        //line.rotateZ(Math.PI/4);
                        
                        scene.add(line);
                }
               
        //三、场景渲染
                function render1() {
                        //renderer1.clear();
                        renderer1.render( scene, camera1 );
                }
                function render2() {
                        //renderer1.clear();
                        renderer2.render( scene, camera2 );
                }
        //四、相机控制
                function controlCamera1(){
                        //通过controls1相机控制器监听鼠标左中右健事件
                        controls1.addEventListener('change', function () {
                                //renderer1.clear();
                                renderer1.render( scene, camera1 );
                                
                        });
                        controls1.screenSpacePanning=true;
                        //通过DOM监听鼠标左健点击事件
                        renderer1.domElement.addEventListener('click', function(evt){
                                console.log("X:"+evt.clientX+"|"+"Y:"+evt.clientY);
                                var vt=new THREE.Vector3();
                                camera1.getWorldDirection(vt);
                                console.log("相机位置点:");
                                console.log(camera1.position);
                                console.log("相机目标点:");
                                console.log(controls1.target);
                                console.log(vt);
                                
                        });
                }
                function controlCamera2(){
                        controls2.addEventListener('change', render2);//监听鼠标、键盘事件
                        controls2.screenSpacePanning=true;
/*
                        renderer2.domElement.addEventListener('click', function(evt){
                                console.log("X:"+evt.clientX+"|"+"Y:"+evt.clientY);
                                var vector = new THREE.Vector3(( evt.clientX / width ) * 2 - 1, -( evt.clientY / height ) * 2 + 1,0.5);
                                console.log(vector);
                    var vectorP = vector.unproject(camera2);
                                console.log(vectorP);
                        });
*/
                }


                function main(){
                //一、总体框架
                        initScene();
                        
                        initCamera1();
                        initCamera2();
                        
                        initRenderer1();
                        initRenderer2();
                        
                        initcontrols1();
                        initcontrols2();
                //二、场景内容        
                        initLight();
                        initObject();
                //三、渲染
                        render1();
                        render2();
                //四、控制
                        controlCamera1();
                        controlCamera2();
                        
                        console.log("111111");
                        console.log(controls1.target);
                }
        </script>


</head>




<body>
        <div id="Window1"></div>
        <div id="Window2"></div>
</body>
</html>

回复 支持 反对

使用道具 举报

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
 楼主| 发表于 2022-4-6 23:40:42 | 显示全部楼层
THREE.js 基础模板:
E:\A1_IT\WebGL\three.js-master\Sample\ThreejsBaseTemplate.html

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|01BIM社区 - 最专业的BIM技术交流平台 ( 渝ICP备15000873号 )

GMT+8, 2024-3-29 16:21 , Processed in 0.050525 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表