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

01BIM社区

 找回密码
 立即注册

扫一扫,访问微社区

查看: 3158|回复: 0

我的第一个three.js应用

[复制链接]

155

主题

643

帖子

2531

积分

金牌会员

Rank: 6Rank: 6

积分
2531
发表于 2022-3-4 09:14:31 | 显示全部楼层 |阅读模式
本帖最后由 tzbm123456 于 2022-3-4 12:47 编辑

<!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="../src/math/Vector3.js"></script>

        <style>
                body { margin: 0; }
                canvas { display: block; }
        </style>

        <script>
                function init(){
                //创建场景和相机
                        var scene = new THREE.Scene();
                        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
                //创建设置渲染器,并添加至body
                        var renderer = new THREE.WebGLRenderer();
                        renderer.setSize( window.innerWidth, window.innerHeight );
                        document.body.appendChild( renderer.domElement );                //以下三种鼠标事件方式均可
                        //document.body.addEventListener("click",ceshi);
                        //document.getElementsByTagName("body")[0].addEventListener("mousedown",ceshi);ceshi后面不能跟()
                        document.body.addEventListener("click",function(evt){
                                console.log("X: " + evt.offsetX + ", Y: " + evt.offsetY);
                                alert("OOKK");
                        });
                //创建cube,并添加至scene
                        var geometry = new THREE.BoxGeometry();
                        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                        var cube = new THREE.Mesh( geometry, material );
                        scene.add( cube );
                //调整相机位置
                        camera.position.z = 5;
                //显示实体
                        function render() {
                                renderer.render( scene, camera );
                        };
                        render();
                //移动相机
                        var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
                        controls.addEventListener('change', render);//监听鼠标、键盘事件
                }
                function ceshi(){
                        alert("OOKK!");
                }
        </script>
</head>

<body>

</body>
</html>


回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-3-29 17:20 , Processed in 0.051903 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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