<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body { margin: ; }
canvas { width: %; height: % }
</style>
<script src="./node_modules/three/three.js"></script>
<script src="./node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script src="./node_modules/three/examples/js/loaders/OBJLoader.js"></script>
</head>
<body> <script>
var scene = new THREE.Scene();//创建场景 var geometry = new THREE.BoxGeometry(,,) //创建正方形 长宽高
var material = new THREE.MeshBasicMaterial({color:0xff0000})// 创建材质
var mesh = new THREE.Mesh(geometry,material)//创建网格
scene.add(mesh);
var light = new THREE.PointLight(0xffffff);//创建光源
light.position.set(,,)
scene.add(light)//添加光源 scene.add(new THREE.AmbientLight(0x333333)) var camera = new THREE.PerspectiveCamera(,/,,); //创建相机
camera.position.set(,,);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer(); //渲染器
renderer.setSize(,);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
function render(){
renderer.render(scene,camera); }
var controls = new THREE.OrbitControls(camera); //相机控制器 鼠标
controls.addEventListener('change',render)
// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // var renderer = new THREE.WebGLRenderer();
// renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
</script>
</body>
</html>

three.js 初学小示例的更多相关文章

  1. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  2. node.js 初学(一)—— http fs 服务器/文件/post get

    node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...

  3. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  4. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  5. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 撸一个JS正则小工具

    写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...

  7. Node.js初学

    Node.js 初学~ 其技术上最大的卖点是非阻塞的I/O和基于事件的异步处理机制. 后端没有什么深入研究,一直对其不是很了解. 透过一个例子看 非阻塞 与 通常的 阻塞 var text = rea ...

  8. node.js 初学(二)—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. 【习题 3-7 UVA - 1368 】DNA Consensus String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举每一位字母是什么. 从小到大枚举. 然后计算每一位的总贡献是多少. 取最小的那个输出. [代码] #include <bi ...

  2. 适用android的MVP:怎样组织展示层

    原文 MVP for Android:How to organize presentation layer http://antonioleiva.com/mvp-android/ 译文 MVP(Mo ...

  3. vagrant 的安装与使用

    1. 安装 ubuntu 安装vagrant过程 ubuntu 安装 vagrant 时需要首先安装 virtualbox: (1)下载安装与当前 ubuntu 版本相适应的 virtualbox 安 ...

  4. CQRS之旅——旅程6(我们系统的版本管理)

    旅程6:我们系统的版本管理 准备下一站:升级和迁移 "变化是生活的调味品."威廉·考珀 此阶段的最高目标是了解如何升级包含实现CQRS模式和事件源的限界上下文的系统.团队在这一阶段 ...

  5. [Angular] Angular Global Keyboard Handling With EventManager

    If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. ...

  6. 35、在编译Linux内核中增加程序需要完成以下3项工作

    在编译Linux内核中增加程序需要完成以下3项工作: 将编写的源代码拷入Linux内核源代码的相应目录. 在目录的Kconfig文件中增加关于新源代码对应项目的编译配置选项 在目录的Makefile文 ...

  7. Qt 信号-槽的同步与异步处理

    通常使用的connect,实际上最后一个參数使用的是Qt::AutoConnection类型:Qt支持6种连接方式.当中3中最主要: 1.Qt::DirectConnection(直连方式)(信号与槽 ...

  8. Cannot find module "element-ui/lib/theme-default/index.css"——解决办法

    在vuejs中使用element-ui 1.安装 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnp ...

  9. vuejs及相关工具介绍

    轻量级前端mvm的框架 图片.png 对es6语法的简单描述 图片.png 融合了react和angular的优点,组件化和灵活应用和指令,在国际上是一款极有潜力的前端框架. 1.双向绑定 两段相加得 ...

  10. 【9204】第k小整数

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 现有n个整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000 ...