threeJs(1)

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量95 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cyany/p/9375434.html
版权

首先，引入threejs，版本问题需要注意，这里使用的是r69的
在样式表中设置

<style>
body{
    magrin:0;
    overflow:hidden;
}
</style>

基本渲染开始：

<div id="webgl"></div>

    <script type="text/javascript">
        function init(){

        }
        window.onload=init;
    </script>

first demo:

<div id="webgl"></div>
    <script type="text/javascript">
        function init(){
            var scene = new THREE.Scene();  //create a scene
            var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera

            var renderer = new THREE.WebGLRenderer(); // 渲染器对象,场景
            renderer.setClearColorHex(0xeeeeee);  //设置场景颜色
            renderer.setSize(window.innerWidth,window.innerHeight); //设置场景大小

            var axes = new THREE.AxisHelper(20);// 坐标轴
            scene.add(axes); //添加坐标轴到场景

            var planeGeometry = new THREE.PlaneGeometry(60,20); //创建平面几何
            var planeMaterial = new THREE.MeshBasicMaterial({color:0x53ff53}); //创建材料
            var plane = new THREE.Mesh(planeGeometry,planeMaterial); //合并到网格对象中
            plane.rotation.x = - 0.5 * Math.PI;//设置平面位置
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4); //创建立方体
            var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});//创建材料
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z =0;
            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4,20,20); //创建球体
            var sphereMaterial = new THREE.MeshBasicMaterial({color:0x00ffff,wireframe:true});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
            sphere.position.x = 20;
            sphere.position.y = 4;
            sphere.position.z = 2;
            scene.add(sphere);

            camera.position.x = -30; //摄像机位置
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position); //指向场景的中心

            document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
            renderer.render(scene,camera); //使用指定摄像机渲染场景


        }
        window.onload=init;
    </script>

添加材质和灯光，阴影

材质：
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});//创建材料,换了一种材料！！！MeshBasicMaterial

var sphereMaterial = new THREE.MeshPhongMaterial({color:0x7777ff}); //又换了一种材料

灯光：
var spotLight = new THREE.SpotLight(0xffffff); //增加光源
            spotLight.position.set(-40,60,-10);
            scene.add(spotLight);


renderer.setClearColor(new THREE.Color(0xeeeeee,1.0));
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.shadowMapEnabled = true; //开启阴影

            plane.receiveShadow = true; //接收阴影
            cube.castShadow = true; //投射阴影
            sphere.castShadow = true;

            spotLight.castShadow = true;//产生阴影的光源

左上角的监控

需要引入<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js" integrity="sha256-+1GQIedPpXiBLJ/UvD5WPPkL6LBQinbFrp1xcz5ECy8=" crossorigin="anonymous"></script>

定义一个div用来放置<div id="stats"></div>

在开始初始化的时候就进行监控
function init(){
            var stats = initStats();

            var scene = new THREE.Scene();  //create a scene
            var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera
******

定义 initStats方法
function initStats(){
            var stats = new Stats();
            stats.setMode(0); //0 检测画面每秒的传输帧数（fps）,1 检测画面的渲染时

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById('stats').appendChild(stats.domElement);
            return stats;

        }

动画效果：

代码放在init方法中
var step = 0;
            function renderScene(){
                stats.update();//通知stats对象画面何时被重新渲染

                cube.rotation.x += 0.02;
                cube.rotation.y += 0.02;
                cube.rotation.z += 0.02;

                step +=0.04;
                sphere.position.x = 20+(10 * (Math.cos(step)));
                sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));
                
                requestAnimationFrame(renderScene);
                renderer.render(scene,camera);
            }
            document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
            // renderer.render(scene,camera); //使用指定摄像机渲染场景
            renderScene();

dat.gui.js
google一个大佬开发的一个dat.gui.js动态改变变量

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js" integrity="sha256-NFmsoybQWpufW0NQt1wvxTVt49lqjvjyfFjvk9SCRl4=" crossorigin="anonymous"></script>
var controls = new function(){ //定义一个JavaScript对象，该对象将保存希望通过dat.GUI改变的属性
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
        };
        var gui = new dat.GUI();
        gui.add(controls,'rotationSpeed',0,0.5); //将JavaScript对象传递给data.GUI对象，并设置取值范围
        gui.add(controls,'bouncingSpeed',0,0.5);


...............
var step = 0;
            function renderScene(){
                stats.update();//通知stats对象画面何时被重新渲染

                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 = 2 +(10 * Math.abs(Math.sin(step)));
                
                requestAnimationFrame(renderScene);
                renderer.render(scene,camera);
            }
document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
            // renderer.render(scene,camera); //使用指定摄像机渲染场景
            renderScene();

响应式：
当画面渲染好的时候，如果缩小浏览器的屏幕大小，画面并不会自适应的减小

需要将camera，scene,renderer 放在全局变量中，一开始都是init方法里面的局部变量，所以外界并不能访问   var scene,camera,renderer;
window.addEventListener('resize',onresize,false);
        function onresize(){
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth,window.innerHeight);
        }

综上所述的最后demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js" integrity="sha256-+1GQIedPpXiBLJ/UvD5WPPkL6LBQinbFrp1xcz5ECy8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js" integrity="sha256-NFmsoybQWpufW0NQt1wvxTVt49lqjvjyfFjvk9SCRl4=" crossorigin="anonymous"></script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="webgl"></div>
    <div id="stats"></div>
    <script type="text/javascript">
        var scene,camera,renderer;
        function init(){
            var stats = initStats();

            scene = new THREE.Scene();  //create a scene
            camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera

            renderer = new THREE.WebGLRenderer(); // 渲染器对象,场景
            renderer.setClearColorHex(0xeeeeee);  //设置场景颜色
            renderer.setSize(window.innerWidth,window.innerHeight); //设置场景大小

            var axes = new THREE.AxisHelper(20);// 坐标轴
            scene.add(axes); //添加坐标轴到场景

            var planeGeometry = new THREE.PlaneGeometry(60,20); //创建平面几何
            var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff}); //创建材料,换了一种材料！！！
            var plane = new THREE.Mesh(planeGeometry,planeMaterial); //合并到网格对象中
            plane.rotation.x = - 0.5 * Math.PI;//设置平面位置
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4); //创建立方体
            var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});//创建材料,换了一种材料！！！
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z =0;
            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4,20,20); //创建球体
            var sphereMaterial = new THREE.MeshPhongMaterial({color:0x7777ff}); //又换了一种材料
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
            sphere.position.x = 20;
            sphere.position.y = 0;
            sphere.position.z = 2;
            scene.add(sphere);

            var spotLight = new THREE.SpotLight(0xffffff); //增加光源
            spotLight.position.set(-40,60,-10);
            scene.add(spotLight);

            renderer.setClearColor(new THREE.Color(0xeeeeee,1.0));
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.shadowMapEnabled = true; //开启阴影

            plane.receiveShadow = true; //接收阴影
            cube.castShadow = true; //投射阴影
            sphere.castShadow = true;

            spotLight.castShadow = true;//产生阴影的光源

            camera.position.x = -30; //摄像机位置
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position); //指向场景的中心

            var step = 0;
            function renderScene(){
                stats.update();//通知stats对象画面何时被重新渲染

                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 = 2 +(10 * Math.abs(Math.sin(step)));
                
                requestAnimationFrame(renderScene);
                renderer.render(scene,camera);
            }
            document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
            // renderer.render(scene,camera); //使用指定摄像机渲染场景
            renderScene();
        }

        function initStats(){
            var stats = new Stats();
            stats.setMode(0); //0 检测画面每秒的传输帧数（fps）,1 检测画面的渲染时
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById('stats').appendChild(stats.domElement);
            return stats;

        }

        var controls = new function(){ //定义一个JavaScript对象，该对象将保存希望通过dat.GUI改变的属性
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
        };
        var gui = new dat.GUI();
        gui.add(controls,'rotationSpeed',0,0.5); //将JavaScript对象传递给data.GUI对象，并设置取值范围
        gui.add(controls,'bouncingSpeed',0,0.5);


        window.onload=init;
        window.addEventListener('resize',onresize,false);
        function onresize(){
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth,window.innerHeight);
        }

    </script>
</body>
</html>

转载于:https://www.cnblogs.com/cyany/p/9375434.html

weixin_30436891
关注
threejs 火焰效果
04-13
Three.js 火焰效果的实现是通过结合WebGL技术，利用Three.js库来创建视觉上的火焰和烟雾效果。本文将探讨如何使用Three.js实现火焰效果的几个关键知识点。 首先，Three.js是一个基于WebGL的JavaScript库，它简化了...
Threejs天空盒示例
04-22
Three.js 是一个基于 WebGL 的 JavaScript 库，用于在 Web 浏览器中创建三维图形和交互式场景。天空盒（Skybox）是 Three.js 中一个常见的技术，它为场景提供了一个无限远的背景，通常用来模拟环境的天空或周围环境...
threejs 笔记整理
weixin_60645637的博客
04-03 781
本文章只做笔记，内容来自。一、threejs基础。
threejs学习记录第一天
旅行中的伊蕾娜的博客
04-22 419
使用cdn引入threejs。
webgl随记
htong521的博客
09-13 248
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。 通过Three.js，你不仅可以创建相机、物体、光线、材质等等，还可以选择着色器，可以决定使用何种技术（WebGL、Canvas或SVG）在网页上渲染你的3D图形。 材质 ：毫无疑问，这是Three.js最有用的部分了。这部分提供了几个非常易用的通用材质模型： 1.Bas...
【three.js详解之二】渲染器篇
weixin_33831673的博客
10-23 224
本篇文章将详细讲解three.js中渲染器（renderer）的设置方法。 three.js文档中渲染器的分支如下： Renderers CanvasRenderer DOMRenderer SVGRenderer WebGLRenderer WebGLRenderTarget WebGLRenderTar...
JS中document.getElementById()用法
qq_47776903的博客
03-01 5381
getElementById 方法 返回具有指定 ID 属性值的第一个比如说有个网页中有个input 框的id叫FAX getElementById(FAX)就能得到这个input 框的对象,并使用input 框的所有属性和方法 这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。 <input type="text" id="FAX" name="F
ThreeJs绘制仓库场景
Baker的博客
11-24 2764
基于ThreeJs开发的仓库3D效果
学习threejs，光晕效果
我哎GIS博客
10-09 1441
👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师 文章目录一、🍀前言二、🍀光晕效果实现1. ☘️实现思路2. ☘️代码样例 一、🍀前言 本文详细介绍如何基于threejs在三维场景中实现光晕效果，亲测可用。希望能帮助到您。一起学习，加油！加油！ 二、🍀光晕效果实现 1. ☘️实现思路 1、初始化renderer渲染器 2、初始化Scene三维场景 3、初始化camera相机，定义相机位置 camera.pos
Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_
10-03
在本项目中，"Test1_海洋_three.js大海_ThreeJS_threejs体绘制数据_threejs颜色_" 提供了一个关于使用Three.js库创建海洋温度颜色体绘制的实例。Three.js是一款强大的JavaScript库，专用于在Web浏览器中进行3D图形...
threejs简单例子,threejs中文实例,JavaScript
09-10
标题"threejs简单例子,threejs中文实例,JavaScript"表明我们将通过一个简单的示例来学习Three.js的基础应用，并且这个示例是针对中文用户编写的。 首先，Three.js的核心概念包括场景（Scene）、相机（Camera）和...
threejs 切换场景
07-29
threejs切换场景 实现图朴上的切换效果， 而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部 等效果 ， threejs scene的切换 ， 视角的...
【three.js学习笔记】渲染器
weixin_34085658的博客
04-06 341
渲染器api WebGL渲染器（WebGLRenderer） WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬件加速从而提高渲染性能。这个渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。 声明 var renderer = new THREE.WebGLRe...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 300
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 134
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 226
遍历echarst多个图表，并添加独立的缩放函数
JavaScript的第十一天
全栈学习ing
10-31 736
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 241
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
ThreeJS项目快速入门Demo演示
1. Web项目结构的建立：一个典型的WebGL/ThreeJS项目需要一个HTML文件作为入口，可能还需要一个或多个JavaScript文件来处理初始化和渲染逻辑，以及CSS文件来定义样式。 2. Three.js库的引入：Demo项目会包含一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值