js学习（three.js脚本）

openGL作为事实上的3d标准，可以在不同的os平台上使用。但是openGL一般需要用c进行开发，有所不便。然而，随着WebGL的推出，人们开始发现可以使用js编写3d程序，利用浏览器将3d效果渲染出来。这其中，three.js作为支持WebGL的一个基本3d库，使用的最为广泛。针对three.js，建议大家直接到官网学习相关知识，效果最为明显。本篇文章只是抛砖迎玉，给大家一个直观的概念和代码展示。

<!DOCTYPE html>
<html>
<head><title></title><style>canvas { width: 100%; height: 100% }</style><script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
</head>
<body><script>var scene = new THREE.Scene();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);var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial({color: 0x00ff00});var cube = new THREE.Mesh(geometry, material); scene.add(cube);camera.position.z = 5;function render() {requestAnimationFrame(render);cube.rotation.x += 0.1;cube.rotation.y += 0.1;renderer.render(scene, camera);}render();</script>
</body>
</html>

上面的代码最为简单，大家可以直接使用。其中js文件引用了qq服务器上的一个静态文件，主要的代码包含在<script></script>当中，大家可以根据自己的要求灵活进行修改。

ps:

之所以注意到WebGL的内容，还是因为在百度apollo开源代码中看到了相关提示。事实上，根据项目来学不同的语言、框架、软件，这样往往效率最高。这也是我最近的感觉和体会。此外，使用js这些脚本开发应用，确实在效率和便捷性上面有很大的优势，这些都是系统编程语言所缺少的。

js学习（three.js脚本）相关推荐

JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
Node.js学习-01node.js的下载安装
一.官网下载 Node.js中文地址:http://nodejs.cn/ 使用稳定版本,推荐下载12版的(node-v12.18.4-x64.msi) 不要装14版.不建议装最新版本二.安装Node ...
js学习总结----js中常用的四种输出方式
1.alert('内容') 在浏览器中弹出框显示我们的内容不输入内容弹出undefined (注意alert弹出的都是字符串) 2.document.write('内容') 在页面中输出显 ...
JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言基础背景知识一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式一.行内式(了解即可,项目中不使用,日常练习尽 ...
node.js学习随笔
Node的文件和文件系统API位于fs模块中: var fs=require("fs")//加载文件系统API 同步读取文件,通过传递编码获得文本而非字节: var text = ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习总结
NodeJS介绍 1.概述: Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网 ...
require.js学习记录
1.简介官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-brows ...
vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
Angular.js学习-入门
官方文档 https://angular.io/guide/quickstart 一.Angular.js是什么? Angular.js是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框 ...

js学习（three.js脚本）

js学习（three.js脚本）相关推荐

最新文章

热门文章