WebGL入门学习之简单3D示例

最新推荐文章于 2024-04-17 23:44:22 发布

VIP文章 coldlessboy

最新推荐文章于 2024-04-17 23:44:22 发布

阅读量669

点赞数 1

分类专栏： webGL 文章标签： html webGL 3D Three.js

本文链接：https://blog.csdn.net/weixin_44775117/article/details/101367494

版权

前言

webGL可以理解为openGL ES2.0（webGL2.0 - openGL ES3.0）的javascript绑定。所以实现的语言是

javascript和opengl(最常用的跨平台图形库)着色语言，webgl是HTML5中提出的新技术，是一种3D绘图标准。

three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较

高,Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。

代码与效果展示

<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>

	<link rel="stylesheet" href="../css/webglbook.css" /> 
	<script src="../libs/Three.js"></script>
	<script src="../libs/RequestAnimationFrame.js"></script>
	<script>
	
	var renderer = null, 
		scene = null, 
		camera = null,
		cube = null,
		animating = false;
	
	function onLoad()
	{
   
		// Grab our container div
        var container = document.getElementById("container");

        // Create the Three.js renderer, add it to our div
	    renderer = new THREE.WebGLRenderer( {
    antialias: true } );
	    renderer.setSize(container.offsetWidth, container.offsetHeight);
	    container.appendChild( renderer.domElement );

	    // Create a new Three.js scene
	    scene = new THREE.Scene();

	    // Put in a camera
        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight,

最低0.47元/天解锁文章

coldlessboy

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
WebGL入门学习之简单3D示例

前言webGL可以理解为openGL ES2.0（webGL2.0 - openGL ES3.0）的javascript绑定。所以实现的语言是javascript和opengl(最常用的跨平台图形库)着色语言，webgl是HTML5中提出的新技术，是一种3D绘图标准。three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Thre...
复制链接

扫一扫