效果图

安装

npm install three

帧率统计工具

// 监听动画帧率

var Stats = function () {

	var mode = 0;

	var container = document.createElement( 'div' );
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
container.addEventListener( 'click', function ( event ) { event.preventDefault();
showPanel( ++ mode % container.children.length ); }, false ); // function addPanel( panel ) { container.appendChild( panel.dom );
return panel; } function showPanel( id ) { for ( var i = 0; i < container.children.length; i ++ ) { container.children[ i ].style.display = i === id ? 'block' : 'none'; } mode = id; } // var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); if ( self.performance && self.performance.memory ) { var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); } showPanel( 0 ); return { REVISION: 16, dom: container, addPanel: addPanel,
showPanel: showPanel, begin: function () { beginTime = ( performance || Date ).now(); }, end: function () { frames ++; var time = ( performance || Date ).now(); msPanel.update( time - beginTime, 200 ); if ( time >= prevTime + 1000 ) { fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); prevTime = time;
frames = 0; if ( memPanel ) { var memory = performance.memory;
memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); } } return time; }, update: function () { beginTime = this.end(); }, // Backwards Compatibility domElement: container,
setMode: showPanel }; }; Stats.Panel = function ( name, fg, bg ) { var min = Infinity, max = 0, round = Math.round;
var PR = round( window.devicePixelRatio || 1 ); var WIDTH = 80 * PR, HEIGHT = 48 * PR,
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; var canvas = document.createElement( 'canvas' );
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.cssText = 'width:80px;height:48px'; var context = canvas.getContext( '2d' );
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
context.textBaseline = 'top'; context.fillStyle = bg;
context.fillRect( 0, 0, WIDTH, HEIGHT ); context.fillStyle = fg;
context.fillText( name, TEXT_X, TEXT_Y );
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); return { dom: canvas, update: function ( value, maxValue ) { min = Math.min( min, value );
max = Math.max( max, value ); context.fillStyle = bg;
context.globalAlpha = 1;
context.fillRect( 0, 0, WIDTH, GRAPH_Y );
context.fillStyle = fg;
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); } }; }; export { Stats as default };

变量控制GUI

创建一个小窗口,能够方便的控制变量

安装 npm install --save dat.gui

demo

<template>
<div>
<div id="Stats-output"></div>
<div ref="ThreeBox"></div>
</div>
</template> <script>
/* eslint-disable */
import * as THREE from 'three';
import Stats from '../assets/js/stats.js';
import * as dat from 'dat.gui'; var scene = new THREE.Scene(); // 场景,用来保存渲染的物体
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); // 相机,定义渲染的物体
var mousecontrols = new THREE.OrbitControls(camera); var renderer = new THREE.WebGLRenderer(); // 渲染器,定义角度,WebGLRenderer表示使用显卡来渲染场景
renderer.setClearColor(0xEEEEEE); // 设置背景颜色
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置背景大小
renderer.shadowMap.enabled = true; // 开启阴影映射 var axes= new THREE.AxesHelper(20); // 创建坐标轴
scene.add(axes); var spotLight = new THREE.SpotLight(0xffffff); // 创建光源
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true; // 此光源开启阴影效果
scene.add(spotLight); var planeGeometry = new THREE.PlaneGeometry(60,20,1,1); // 创建平面,宽60高20
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); // 设置平面的材质,MeshBasicMaterial材质不会对光源产生效果
var plane = new THREE.Mesh(planeGeometry,planeMaterial); // 将平面放置到Mesh对象中
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
plane.receiveShadow = true; // 生成阴影
scene.add(plane); var cubeGeometry = new THREE.CubeGeometry(4,4,4); // 创建立方体
var cubeMaterial = new THREE.MeshLambertMaterial({color : 0xff0000}); // 可以添加,wireframe: true表示线框
var cube= new THREE.Mesh(cubeGeometry, cubeMaterial );
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
cube.castShadow = true;
scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20); // 创建球体
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere= new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4 ;
sphere.position.z = 2 ;
sphere.castShadow = true;
scene.add (sphere) ; camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30; camera.lookAt(scene.position); // 场景中心 let step = 0;
const gui = new dat.GUI(); // 创建gui工具,控制变量
var controls= new function() {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03 ;
}
gui.add(controls,'rotationSpeed', 0, 0.5);
gui.add(controls,'bouncingSpeed', 0, 0.5); export default {
mounted() {
this.$refs.ThreeBox.appendChild( renderer.domElement );
renderer.render(scene, camera );
this.renderScene();
},
methods: {
renderScene(){
let stats = this.initStats(); // stats.js代码如下,用来监听动画帧率的 stats.begin(); 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))); renderer.render(scene, camera);
stats.end(); requestAnimationFrame(this.renderScene); // 重画场景,从而方便应用动画效果
}, initStats () {
var stats= new Stats ();
stats.showPanel( 1 );
this.$refs.StatsBox.appendChild(stats.dom);
return stats;
}
}
}
</script>

Three.js创建运动立体几何体示例的更多相关文章

  1. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  2. 【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

    原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容 ...

  3. Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  4. [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  5. Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  6. 使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

    序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...

  7. js 创建数组方法以及区别

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  8. 使用three.js创建大小不随着场景变化的文字

    使用three.js创建大小不随着场景变化的文字,需要以下两步: 1.将文字绘制到画布上. 2.创建着色器材质,把文字放到三维场景中. 优点: 1.跟用html实现文字相比,这些文字可以被模型遮挡,更 ...

  9. MsXml创建和解析XML示例

    一.MsXml创建XML文档示例 // XmlCreationDemo.cpp #include <stdlib.h> #include <stdio.h> // 引入MSXM ...

随机推荐

  1. smarty语法

    HTML中直接显示数据 <{$data}> foreach循环 <{foreach from=$data item=item key=key}> <li data-ind ...

  2. 51nod1241 lis变形

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1241 1241 特殊的排序 题目来源: 摩根斯坦利的比赛题 基准时间限制 ...

  3. ARM的编程模式和7种模式

    ARM采用的是32位架构 ARM阅读 --Byte:        8   bits --Halfword:  16  bits(2 byte)  半字 --Word:       32  bits( ...

  4. S5PV210启动过程详解1

    内存: SRAM  静态内存     特点就是容量小.价格高.优点是不需要软件初始化直接上电就能用 DRAM  动态内存    特点就是容量大.价格低.缺点就是上电后不能直接使用,需要软件初始化后才可 ...

  5. 《锋利的jQuery》读书笔记(DOM+事件)

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  6. ip分包研究-以UDP为例

    原文 http://www.jianshu.com/p/741cb12ab0c9 测试环境: 利用iOS的NE从TUN抓取IP packets,如下代码分析ip包: uint16_t iphid = ...

  7. 无法打开包括文件:“iostream.h”

    把#include<iostream.h>改为:#include<iostream>using namespace std; #include<iostream.h> ...

  8. Ubuntu下安装为知笔记

    之前在Windows下用的是有道云笔记,但是后来开始习惯使用Linux开发,有道云官方并没有提供Ubuntu的版本,所以权衡之下,选择了为知笔记,安装步骤: sudo add-apt-reposito ...

  9. 【MFC】如何在MFC创建的程序中更改主窗口的属性 与 父窗口 WS_CLIPCHILDREN 样式 对子窗口刷新的影响 与 窗体区域绘制问题WS_CLIPCHILDREN与WS_CLIPSIBLINGS

    如何在MFC创建的程序中更改主窗口的属性 摘自:http://blog.sina.com.cn/s/blog_4bebc4830100aq1m.html 在MFC创建的单文档界面中: (基于对话框的, ...

  10. 深入理解java虚拟机-第十章-早期(编译期)优化

    第10章  早期(编译期)优化 javac编译过程: 1.解析与填充符号表过程 词法.语法分析 将源代码的字条流转变为标记(Token)集合.如“int a = b + 2”这名代码包含了6个标记,分 ...